Summary list
Summary list is used to summarise information such as a user’s responses at the end of a form.
import { ... } from '@ag.ds-next/react/summary-list';
<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
components.
<SummaryList> <SummaryListItem> <SummaryListItemTerm>First name</SummaryListItemTerm> <SummaryListItemDescription>Will</SummaryListItemDescription> <SummaryListItemAction> <TextLink href="#">Change</TextLink> </SummaryListItemAction> </SummaryListItem> <SummaryListItem> <SummaryListItemTerm>Last name</SummaryListItemTerm> <SummaryListItemDescription>Power</SummaryListItemDescription> <SummaryListItemAction> <TextLink href="#">Change</TextLink> </SummaryListItemAction> </SummaryListItem> <SummaryListItem> <SummaryListItemTerm>Contact information</SummaryListItemTerm> <SummaryListItemDescription> <Stack> <Text>+61 9912 3456</Text> <Text>will.power@example.com</Text> </Stack> </SummaryListItemDescription> <SummaryListItemAction> <TextLink href="#">Change</TextLink> </SummaryListItemAction> </SummaryListItem> <SummaryListItem> <SummaryListItemTerm>Date of birth</SummaryListItemTerm> <SummaryListItemDescription>09/06/1995</SummaryListItemDescription> <SummaryListItemAction> <TextLink href="#">Change</TextLink> </SummaryListItemAction> </SummaryListItem> </SummaryList>
Related components
- 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.