Description List
Semantic dl/dt/dd for descriptive content — profile fields, spec sheets, and metadata where values are sentences, not codes.
When to use Description List vs. Key Value
Use Description List for descriptive content where values are phrases, sentences, or rich React nodes — user profiles, product specs, about pages, definition lists. It renders as native <dl>/<dt>/<dd>, so screen readers announce term/description associations correctly.
Reach for Key Value instead when you need copy-to-clipboard, monospace codes, or truncation — that primitive is tuned for short technical metadata (IDs, keys, endpoints).
Preview
Product specifications — long descriptive values
Eidetic Pro Subscription
Everything included in the Pro tier
- Included components
- All 132 UI primitives plus the full block library — AI components, workflow builders, governance dashboards, and chart primitives. New components ship monthly.
- Support
- Priority email support with 24-hour response time on business days. Includes architecture review sessions and early access to beta components.
- License
- Commercial use in unlimited projects, including client work and white-labelled products. No per-seat fees.
- Billing
- Billed annually in advance. Cancel anytime — we pro-rate the refund for unused months.
Profile fields
A user profile with icons, links, and inline badges
Sarah Wilson
Senior Product Designer
- About
- Product designer with 8+ years building design systems at fintech and B2B SaaS companies. Currently focused on accessibility and multi-brand theming.
- Location
- San Francisco, CARemote-friendly
Layouts
Three layout options for descriptive content
Stacked — term above description, best for long values
- Refund policy
- Full refund within 30 days of purchase. After that, pro-rated based on unused subscription time.
- Data retention
- Project data is retained for 90 days after account cancellation, then permanently deleted.
Horizontal — aligned columns, best for scannable fields
- Plan
- Pro (annual billing)
- Members
- 12 active seats, 3 invited
- Renewal
- Renews automatically on March 15
Inline — compact metadata row
- Status
- Active
- Version
- 2.4.1
- Last updated
- 2 hours ago
Sizes
Small, medium, and large text sizes
sm
- Project
- Eidetic Design System
- Owner
- Platform team
md
- Project
- Eidetic Design System
- Owner
- Platform team
lg
- Project
- Eidetic Design System
- Owner
- Platform team
Props
DescriptionList component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array<{term, description, icon?}> | — | Array of term/description pairs |
layout | 'stacked' | 'horizontal' | 'inline' | 'stacked' | Layout orientation |
size | 'sm' | 'md' | 'lg' | 'md' | Text size |
className | string | — | Additional CSS classes |
Composition Components
DescriptionListItem — Wrapper for a term/description pair
DescriptionListTerm — The term (dt element), optional icon
DescriptionListDescription — The description (dd element), accepts any React content
Usage
Import and implementation example
import { DescriptionList, DescriptionListItem, DescriptionListTerm, DescriptionListDescription,} from '@/components/ui/description-list'
// Quick setup with items prop<DescriptionList layout="stacked" items={[ { term: 'Refund policy', description: 'Full refund within 30 days of purchase.', icon: <Scale />, }, { term: 'Support', description: 'Priority email support, 24-hour response time.', icon: <ShieldCheck />, }, ]}/>
// Custom composition for rich values<DescriptionList layout="stacked"> <DescriptionListItem> <DescriptionListTerm icon={<User />}>About</DescriptionListTerm> <DescriptionListDescription> Product designer with 8+ years building design systems. </DescriptionListDescription> </DescriptionListItem></DescriptionList>Features
Built-in functionality
- Semantic HTML: Renders as dl/dt/dd for correct screen reader association
- Three layouts: Stacked (long values), horizontal (columns), inline (compact)
- Icon support: Optional icons for terms
- Size variants: Small, medium, large
- Items prop: Quick setup with array of term/description
- Composition: Individual sub-components for custom layouts
- Rich descriptions: Any React content — links, badges, paragraphs
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses semantic dl, dt, and dd elementsTerm/description association is native — no ARIA neededIcons are decorative and hidden from assistive techKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate to links or interactive elements inside descriptions |
Notes
- Screen readers announce "term / description" pairs correctly
- Maintains document outline and landmark structure
- Links and interactive elements inside descriptions remain accessible