SummaryList

Basic key/value list

Full name

Sarah Johnson

Date of birth

12 March 1985

Email address

[email protected]

import {
  SummaryList,
  SummaryListRow,
  SummaryListKey,
  SummaryListValue,
} from '@eekodigital/raster';

<SummaryList>
  <SummaryListRow>
    <SummaryListKey>Full name</SummaryListKey>
    <SummaryListValue>Sarah Johnson</SummaryListValue>
  </SummaryListRow>
  <SummaryListRow>
    <SummaryListKey>Date of birth</SummaryListKey>
    <SummaryListValue>12 March 1985</SummaryListValue>
  </SummaryListRow>
  <SummaryListRow>
    <SummaryListKey>Email address</SummaryListKey>
    <SummaryListValue>[email protected]</SummaryListValue>
  </SummaryListRow>
</SummaryList>

With action links

Add a SummaryListActions cell to each row to provide contextual change links.

Full name

Sarah Johnson

Change

Date of birth

12 March 1985

Change

import {
  SummaryList,
  SummaryListRow,
  SummaryListKey,
  SummaryListValue,
  SummaryListActions,
} from '@eekodigital/raster';

<SummaryList>
  <SummaryListRow>
    <SummaryListKey>Full name</SummaryListKey>
    <SummaryListValue>Sarah Johnson</SummaryListValue>
    <SummaryListActions>
      <a href="#">Change<span class="sr-only"> full name</span></a>
    </SummaryListActions>
  </SummaryListRow>
  <SummaryListRow>
    <SummaryListKey>Date of birth</SummaryListKey>
    <SummaryListValue>12 March 1985</SummaryListValue>
    <SummaryListActions>
      <a href="#">Change<span class="sr-only"> date of birth</span></a>
    </SummaryListActions>
  </SummaryListRow>
</SummaryList>

Plain variant

A lighter style with bold labels, regular-weight values, and no separator lines.

Full name

Sarah Johnson

Date of birth

12 March 1985

Email address

[email protected]

<SummaryList variant="plain">
  <SummaryListRow>
    <SummaryListKey>Full name</SummaryListKey>
    <SummaryListValue>Sarah Johnson</SummaryListValue>
  </SummaryListRow>
  <SummaryListRow>
    <SummaryListKey>Date of birth</SummaryListKey>
    <SummaryListValue>12 March 1985</SummaryListValue>
  </SummaryListRow>
  <SummaryListRow>
    <SummaryListKey>Email address</SummaryListKey>
    <SummaryListValue>[email protected]</SummaryListValue>
  </SummaryListRow>
</SummaryList>

When to use

Use SummaryList for key-value pairs on review, confirmation, or detail screens — showing a user their submitted data before they confirm, or summarising a record’s attributes.

Use DataTable or Table instead

when you have multiple rows of comparable records rather than a single record’s fields.

Props

SummaryList

Prop	Type	Default	Description
variant	”default” | “plain"	"default”	Visual style. “plain” uses bold labels, regular-weight values, and no separator lines.
children	ReactNode	—	One or more SummaryListRow elements.
className	string	—	Additional CSS class names.

SummaryListRow

Prop	Type	Default	Description
children	ReactNode	—	A SummaryListKey, SummaryListValue, and optionally SummaryListActions.

SummaryListKey

Prop	Type	Default	Description
children	ReactNode	—	The label for the row.

SummaryListValue

Prop	Type	Default	Description
children	ReactNode	—	The data value for the row.

SummaryListActions

Prop	Type	Default	Description
children	ReactNode	—	Action links or buttons for the row.