Summary List

Use summary lists to present information as a series of key facts in a consistent, scannable format.

Status

Component checklist

Component (RN)

React Native Component Status

Published

Figma (RN)

Figma Component Status

Published

Code (Web)

HTML/CSS Code

TBC

Figma (Web)

Figma Component Status

TBC

Key points

  • Summary lists present information as label-value pairs in a structured format
  • Summary lists contain a label, value, and optional text links for each item
  • Summary lists can include an optional key element for relating items to charts or infographics (four variants available)
  • Summary lists are presented in collections with consistent alignment
  • Summary lists are responsive and move from inline to stacked layout on smaller viewports
  • Text links and spacing always remain aligned to the right for readability

Use summary lists to present information as a series of key facts in a consistent, scannable format.