Summary list

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 <VisuallyHidden>first name</VisuallyHidden>
			</TextLink>
		</SummaryListItemAction>
	</SummaryListItem>
</SummaryList>

Props

Source

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