Lily Design System™

DescriptionList

A definition list displaying information in key-value format <dl>.

Example

DescriptionList
Show demo markup 
<div class="description-list" aria-label="a definition list displaying information in key-value format <dl>">DescriptionList</div>
Usage example 
<DescriptionList>
  <DescriptionListItem term="Date of birth" description="14 January 1990" />
  <DescriptionListItem term="Address" description="1 Example Road, London" />
</DescriptionList>
Show Svelte source 
// In your Svelte component:
import DescriptionList from "lily-design-system-svelte-headless/components/DescriptionList/DescriptionList.svelte";

<DescriptionList>
  <!-- list children -->
</DescriptionList>

Usage

<DescriptionList>
  <DescriptionListItem term="Date of birth" description="14 January 1990" />
  <DescriptionListItem term="Address" description="1 Example Road, London" />
</DescriptionList>

Props

PropTypeDefaultDescription
childrenslot (required)—DescriptionListItem children
...restPropsHTML attributes—Spread onto the root <dl>

Keyboard Interactions

  • No keyboard interactions — this is a passive content list

ARIA

  • Native <dl> semantics describe a list of associated terms and descriptions
  • Screen readers announce the term/description relationship

When to Use

  • Displaying read-only details (profile information, summary metadata) where each value is paired with a label
  • Glossaries, definitions, FAQs in a structured format

When Not to Use

  • Use SummaryList when each row also needs an inline change/edit action
  • Use DataTable for tabular data with column headers shared across rows

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .description-list as the root class. No default styles are included.

Related components

  • description-list-item — child term/description pair
  • summary-list — change-link summary list

References

Implementation Notes

  • Renders a native <dl> element with DescriptionListItem children
  • Each child wraps a <dt> term and one or more <dd> descriptions
  • Spreads restProps onto the root <dl>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: description-list
  • PascalCase: DescriptionList
  • Description: a definition list displaying information in key-value format <dl>
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <dl>
  • CSS class: .description-list
  • Interactive: no

ARIA

  • Native <dl> semantics describe a list of associated terms and descriptions
  • Screen readers announce the term/description relationship

Keyboard

  • No keyboard interactions — this is a passive content list

Props

  • children: slot (required) (default: —) — DescriptionListItem children
  • ...restProps: HTML attributes (default: —) — Spread onto the root <dl>