Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← UI patterns

Summary List

Present the key facts about one record as labelled values.

Fieldwork Press · Booking FP-2048

Your workshop booking

Confirmed
Guest
Alex Morgan
Workshop
Print a field journal
Date
Saturday, 24 October
Places
2 people
Access requirements
None requested

Behavior

Keyboard

Tab
Reach optional Change controls; static facts are not tab stops.
Enter / Space
Activate Change, Save changes, or Cancel.
Parts

Key

The name of the fact.

Value

One or more descriptions associated with that key.

Optional action

A control for changing the associated value.

States

Read-only

Display the facts without implying that rows are clickable.

Editable

Name the field being changed and return focus after saving or cancelling.

Narrow

Stack each value beneath its label while preserving the pairing.

References

Labelled facts with field-specific Change links.
Summary list with actionsGOV.UK Design System

Use it

Figma
Build the summary list
  1. Build a row with key, flexible value, and optional action.
  2. Stack rows in a single record frame.
  3. Create a narrow variant with each value below its key and an editing state.
Accessibility

Description-list semantics connect each label to its values without inventing table columns.

  1. Use dt and dd within a dl.
  2. Name repeated Change actions with the field they affect.
  3. Spell out missing values instead of leaving an unexplained blank.
Research notes & sources

Native dl with dt labels and dd values.

  1. Reference image attribution and licensesSource and capture record
  2. Summary listGOV.UK Design System
  3. Content structureW3C WAI