Geist Design System

Description

Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.

Default

Section Title: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed venenatis libero. Phasellus consectetur turpis ac est pulvinar finibus. Mauris non tellus pretium, vehicula lectus sed, iaculis ex. Integer eu aliquet turpis. Cras sem nulla, commodo ut libero id, suscipit pulvinar lorem.

Use <Description> for definition-list metadata: a short Title Case key paired with a single value (Last Deployed, Region, Plan). For inline help under a form field, use the input’s helper-text slot instead.
Geist renders <dl>/<dt>/<dd> so screen readers announce each key/value pair as a definition. Don’t wrap the component in extra paragraphs that break the list semantics.
Title slot is Title Case noun (Last Deployed, Build Duration); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim.
Pass tooltip only when the title alone is ambiguous and a one-sentence definition resolves it. The tooltip text is sentence case and ends with a period.
Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (<dd>) or in the parent layout, not the label (<dt>).

Was this helpful?