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
Data about this section.

Best Practices
  • 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>).