Agriculture Design System
Beta
Design System for the Export Service

List

Lists are vertical groupings of related items that can be displayed either in an unordered or ordered format.

View in StorybookView in Github
import { ... } from '@ag.ds-next/react/list';
  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
Open in Playroom, opens in a new tab
<Stack gap={1.5}>
	<UnorderedList>
		<ListItem>Unordered list item</ListItem>
		<ListItem>Unordered list item</ListItem>
		<ListItem>Unordered list item</ListItem>
	</UnorderedList>
	<OrderedList>
		<ListItem>Ordered list item</ListItem>
		<ListItem>Ordered list item</ListItem>
		<ListItem>Ordered list item</ListItem>
	</OrderedList>
</Stack>

Do

  • use with block section components like Page alert and Modal, which enforce 1rem spacing between elements.
  • use unordered lists when you do not need to convey a specific order for list items
  • use ordered lists when you need to convey a priority, hierarchy, or sequence between list items.

Don’t

  • use for long form content - instead use a plain ol or ul HTML element inside of the Prose component.

Unordered

The UnorderedList component renders a bulleted list.

  • Unordered List level 1
    • Unordered List level 2
    • Unordered List level 2
      • Unordered List level 3
      • Unordered List level 3
  • Unordered List level 1
  • Unordered List level 1
Open in Playroom, opens in a new tab
<UnorderedList>
	<ListItem>
		Unordered List level 1
		<UnorderedList>
			<ListItem>Unordered List level 2</ListItem>
			<ListItem>
				Unordered List level 2
				<UnorderedList>
					<ListItem>Unordered List level 3</ListItem>
					<ListItem>Unordered List level 3</ListItem>
				</UnorderedList>
			</ListItem>
		</UnorderedList>
	</ListItem>
	<ListItem>Unordered List level 1</ListItem>
	<ListItem>Unordered List level 1</ListItem>
</UnorderedList>

Ordered

The OrderedList component renders a numbered list.

  1. Ordered List level 1
    1. Ordered List level 2
    2. Ordered List level 2
      1. Ordered List level 3
      2. Ordered List level 3
  2. Ordered List level 1
  3. Ordered List level 1
Open in Playroom, opens in a new tab
<OrderedList>
	<ListItem>
		Ordered List level 1
		<OrderedList>
			<ListItem>Ordered List level 2</ListItem>
			<ListItem>
				Ordered List level 2
				<OrderedList>
					<ListItem>Ordered List level 3</ListItem>
					<ListItem>Ordered List level 3</ListItem>
				</OrderedList>
			</ListItem>
		</OrderedList>
	</ListItem>
	<ListItem>Ordered List level 1</ListItem>
	<ListItem>Ordered List level 1</ListItem>
</OrderedList>
  • Link list – Link list is a simple set of vertical or horizontal links used for site navigation and to order information for users.
  • Prose – Provides typographic defaults for vanilla HTML.
  • Text – A primitive typographic component for constrained text styles.
Edit this page