Agriculture Design System
Beta
Design System for the Export Service

Summary list

Summary list is used to summarise information such as a user’s responses at the end of a form.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/summary-list';
Open in Playroom, opens in a new tab
<Stack gap={1.5}>
	<SummaryList>
		<SummaryListItem>
			<SummaryListItemTerm>First name</SummaryListItemTerm>
			<SummaryListItemDescription>Will</SummaryListItemDescription>
		</SummaryListItem>
		<SummaryListItem>
			<SummaryListItemTerm>Last name</SummaryListItemTerm>
			<SummaryListItemDescription>Power</SummaryListItemDescription>
		</SummaryListItem>
		<SummaryListItem>
			<SummaryListItemTerm>Contact information</SummaryListItemTerm>
			<SummaryListItemDescription>
				+61 9912 3456
				<br />
				will.power@example.com
			</SummaryListItemDescription>
		</SummaryListItem>
		<SummaryListItem>
			<SummaryListItemTerm>Date of birth</SummaryListItemTerm>
			<SummaryListItemDescription>09/06/1995</SummaryListItemDescription>
		</SummaryListItem>
	</SummaryList>
	<TextLink href="#">Change all</TextLink>
</Stack>

SummaryList displays a list of terms and descriptions as key value pairs. It is similar to a two-column table, but renders a HTML Description List (<dl>) element.

Common uses for this component are to implement a glossary or to display metadata.

Do

  • categorise information into logical sections
  • where appropriate, include a Change all button below a list rather than below individual items.

Don’t

  • use to compare multiple items or tabular data – use Table
  • include images and diagram
  • create lengthy summaries – break information into smaller categories.

Actions

You can add actions to the end of a SummaryList by nesting <SummaryListItemAction>s and interactive components such as <TextLink>.

Ensure each action’s accessible label is unique for screen reader users by including <VisuallyHidden> text that matches the <SummaryListItemTerm>’s content.

Open in Playroom, opens in a new tab
<SummaryList>
	<SummaryListItem>
		<SummaryListItemTerm>First name</SummaryListItemTerm>
		<SummaryListItemDescription>Will</SummaryListItemDescription>
		<SummaryListItemAction>
			<TextLink href="#">
				Change <VisuallyHidden>first name</VisuallyHidden>
			</TextLink>
		</SummaryListItemAction>
	</SummaryListItem>
	<SummaryListItem>
		<SummaryListItemTerm>Last name</SummaryListItemTerm>
		<SummaryListItemDescription>Power</SummaryListItemDescription>
		<SummaryListItemAction>
			<TextLink href="#">
				Change <VisuallyHidden>last name</VisuallyHidden>
			</TextLink>
		</SummaryListItemAction>
	</SummaryListItem>
	<SummaryListItem>
		<SummaryListItemTerm>Contact information</SummaryListItemTerm>
		<SummaryListItemDescription>
			+61 9912 3456
			<br />
			will.power@example.com
		</SummaryListItemDescription>
		<SummaryListItemAction>
			<TextLink href="#">
				Change <VisuallyHidden>contact information</VisuallyHidden>
			</TextLink>
		</SummaryListItemAction>
	</SummaryListItem>
	<SummaryListItem>
		<SummaryListItemTerm>Date of birth</SummaryListItemTerm>
		<SummaryListItemDescription>09/06/1995</SummaryListItemDescription>
		<SummaryListItemAction>
			<TextLink href="#">
				Change <VisuallyHidden>date of birth</VisuallyHidden>
			</TextLink>
		</SummaryListItemAction>
	</SummaryListItem>
</SummaryList>
  • Table – Tables help make complex information easier to scan and compare. Use tables for exact values or information that would be hard to read in body text.
Edit this page