Agriculture Design System
Design System for import and export services

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 tabOpen responsive preview
<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. The <VisuallyHidden> component can be imported from A11y.

Open in Playroom, opens in a new tabOpen responsive preview
/**
 * import { VisuallyHidden } from '@ag.ds-next/react/a11y';
 */
<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>

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

Light palette

Open in Playroom, opens in a new tabOpen responsive preview
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<Stack gap={1.5}>
		<H4>Summary list: on light body background</H4>
		<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>
</Box>

Dark palette

Open in Playroom, opens in a new tabOpen responsive preview
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Stack gap={1.5}>
		<H4>Summary list: on dark body background</H4>
		<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>
</Box>
  • 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