Description List

Data Display

Layout

A semantic description list component for displaying key-value pairs with multiple layout modes and sizes.

Stacked Layout

Default vertical layout for term-description pairs

Full Name: Jane Cooper
Email: jane@example.com
Phone: +1 (555) 123-4567
Location: San Francisco, CA
Member Since: January 2024

Horizontal Layout

Grid-based layout with terms and descriptions side by side

Full Name: Jane Cooper
Email: jane@example.com
Phone: +1 (555) 123-4567
Location: San Francisco, CA
Member Since: January 2024

Inline Layout

Flexible inline layout for compact displays

Full Name: Jane Cooper
Email: jane@example.com
Phone: +1 (555) 123-4567
Location: San Francisco, CA
Member Since: January 2024

Sizes

Three size variants for different contexts

Size: sm

Name: Jane Cooper
Role: Product Manager

Size: md

Name: Jane Cooper
Role: Product Manager

Size: lg

Name: Jane Cooper
Role: Product Manager

Props

Component API reference

Prop	Type	Default	Description
`layout`	`'stacked' \| 'horizontal' \| 'inline'`	`'stacked'`	Layout direction of the list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Text size variant
`items`	`Array<{ term: ReactNode; description: ReactNode; icon?: ReactNode }>`	—	Array of term-description pairs to render
`children`	`ReactNode`	—	Alternative to items prop for custom rendering
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { DescriptionList } from '@/components/ui/description-list'
import { Mail, Phone } from 'lucide-react'

export default function Example() {
  return (
    <DescriptionList
      layout="horizontal"
      size="md"
      items={[
        { term: 'Email', description: 'jane@example.com', icon: <Mail className="w-4 h-4" /> },
        { term: 'Phone', description: '+1 (555) 123-4567', icon: <Phone className="w-4 h-4" /> },
      ]}
    />
  )
}

Features

Built-in functionality

Three layouts: Stacked, horizontal, and inline layout modes
Three sizes: Small, medium, and large text sizes
Icon support: Optional icons for each term
Semantic HTML: Uses dl, dt, dd elements for proper semantics
Items or children: Render via items array or custom children
Ref forwarding: Supports React ref forwarding

Accessibility

Accessibility considerations

ARIA Attributes

Uses semantic dl/dt/dd HTML elementsTerms and descriptions are properly associated

Keyboard Navigation

Key	Action
`N/A`	Static content, not interactive

Notes

Semantic HTML ensures screen readers announce term-description pairs correctly
Icons are decorative and supplementary to text
Layout changes are purely visual, semantic structure is maintained

Related Components

Table Card List