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';

Usage

Summary list components can be imported via the summary-list entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/summary-list';

Composition

It is important that this component is composed correctly to ensure the correct semantics are conveyed to assistive technology.

<SummaryList>
<SummaryListItem>
<SummaryListItemTerm>First name</SummaryListItemTerm>
<SummaryListItemDescription>Will</SummaryListItemDescription>
<SummaryListItemAction>
<TextLink href="#">Change</TextLink>
</SummaryListItemAction>
</SummaryListItem>
</SummaryList>

Props

SummaryList Props
PropTypeDescription
childrenReactNode
SummaryListItem Props
PropTypeDescription
childrenReactNode
SummaryListItemTerm Props
PropTypeDescription
childrenReactNode
SummaryListItemDescription Props
PropTypeDescription
childrenReactNode
SummaryListItemAction Props
PropTypeDescription
childrenReactNode

Source

You can view the full source code for this package on Github.