Lily Design System™

DescriptionListItem

One key-value pair in a description list using dt and dd elements.

Example

DescriptionListItem
Show demo markup 
<div class="description-list-item" aria-label="one key-value pair in a description list using dt and dd elements">DescriptionListItem</div>
Usage example 
<div class="description-list-item" aria-label="one key-value pair in a description list using dt and dd elements">DescriptionListItem</div>
Show Svelte source 
// In your Svelte component:
import DescriptionListItem from "lily-design-system-svelte-headless/components/DescriptionListItem/DescriptionListItem.svelte";

<DescriptionListItem>
  <!-- DescriptionListItem content -->
</DescriptionListItem>

Usage

<DescriptionListItem term="Email" description="user@example.com" />

Props

PropTypeDefaultDescription
termstring (required)—Term shown in the <dt>
descriptionstring—Description shown in the <dd> (when no children slot)
childrenslot—Custom description content (overrides description)
...restPropsHTML attributes—Spread onto the root <div>

Keyboard Interactions

  • No keyboard interactions

ARIA

  • <dt> and <dd> retain their native term/description semantics inside the wrapper

When to Use

  • As a child of DescriptionList

When Not to Use

  • Use SummaryListItem when the row also needs an inline change link

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-item as the root class. No default styles are included.

Related components

  • description-list — parent list
  • summary-list-item — change-link summary list item

References

Implementation Notes

  • Renders a <div> wrapping a <dt> (term) and a <dd> (description) so each item is a single styling unit while preserving native list semantics
  • Per HTML5, wrapping <dt>/<dd> pairs in a <div> inside <dl> is valid
  • Term and description text come through props or slots
  • Spreads restProps onto the root <div>

Canonical contract

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

Metadata

  • Component: description-list-item
  • PascalCase: DescriptionListItem
  • Description: one key-value pair in a description list using dt and dd elements
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .description-list-item
  • Interactive: no

ARIA

  • <dt> and <dd> retain their native term/description semantics inside the wrapper

Keyboard

  • No keyboard interactions

Props

  • term: string (required) (default: —) — Term shown in the <dt>
  • description: string (default: —) — Description shown in the <dd> (when no children slot)
  • children: slot (default: —) — Custom description content (overrides description)
  • ...restProps: HTML attributes (default: —) — Spread onto the root <div>