Design System/Molecules/Description List

Description List

Key–value pairs for displaying structured details. Common in profile pages, settings panels, and data cards.

Molecule

Badge · Button

When To Use

  • Use Description List when information needs to be scanned quickly and compared across multiple rows, cards, or values.
  • Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
  • Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

  • Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
  • Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Props

title, description, items, columns, striped, className

Example Code

import { DescriptionList } from "@hilum/ui"

<DescriptionList
  title="Applicant Information"
  description="Personal details and application."
  items={[
    { term: "Full name", details: "Margot Foster" },
    { term: "Role", details: "Backend Developer" },
    { term: "Email", details: "margot@example.com" },
    { term: "Salary", details: "$120,000" },
  ]}
/>

Description List · Basic

Default

Term-detail pairs with a header

Applicant Information

Personal details and application.

Full name
Margot Foster
Role
Backend Developer
Email
margot@example.com
Salary
$120,000

Description List · With actions

Inline actions

Each row can carry an action

Status
Active
Plan
Pro · $49/mo
Members
12 / 50
Storage
8.4 GB / 100 GB

Description List · Two columns

2-column layout

For wide panels with many fields

First name
Margot
Last name
Foster
Email
margot@example.com
Phone
+1 555 012 4567
Location
San Francisco, CA
Department
Engineering