Description lists

Labeled key/value rows for detail views. Default, striped, card, and two-column variants.

Preview

Applicant Information

Personal details and application.

Full name
Margot Foster
Application for
Backend Developer
Email address
margotfoster@example.com
Salary expectation
$120,000

Striped

Alternating row backgrounds.

Full name
Margot Foster
Application for
Backend Developer
Email address
margotfoster@example.com
Salary expectation
$120,000

Card

Wrapped in a shadowed card.

Full name
Margot Foster
Application for
Backend Developer
Email address
margotfoster@example.com
Salary expectation
$120,000

Two column

Labels above values; full-width rows via :span.

Full name
Margot Foster
Application for
Backend Developer
Email address
margotfoster@example.com
Salary expectation
$120,000
About
Brief summary text that spans both columns to show the :span => "full" option.

React preview

LiveView (HEEx) 

alias DesignSystem.UI.DescriptionLists

<DescriptionLists.description_list
  title="Applicant Information"
  subtitle="Personal details and application."
  items={[
    %{label: "Full name", value: "Margot Foster"},
    %{label: "Email address", value: "margotfoster@example.com"},
    %{label: "Salary expectation", value: "$120,000"}
  ]}
/>

<DescriptionLists.description_list variant="striped" items={items} />
<DescriptionLists.description_list variant="card" items={items} />
<DescriptionLists.description_list variant="two_column" items={items} />

React (JSX) 

import { DescriptionList } from "../ui/index.mjs"

const items = [
  { label: "Full name", value: "Margot Foster" },
  { label: "Email address", value: "margotfoster@example.com" },
  { label: "Salary expectation", value: "$120,000" },
]

<DescriptionList
  title="Applicant Information"
  subtitle="Personal details and application."
  items={items}
/>

<DescriptionList variant="striped" items={items} />
<DescriptionList variant="card" items={items} />
<DescriptionList variant="two_column" items={items} />