List
Styled unordered or ordered list with ListItem
Category: display · WCAG 2.2-AA · typography, list, ul, ol
Variants
- disc
- decimal
- none
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | 'ul' | 'ol' | ul | The HTML element to render as. |
marker | 'disc' | 'decimal' | 'none' | derived from as (ul→disc, ol→decimal) | List marker style ('disc' | 'decimal' | 'none'). |
Design tokens
--cascivo-font-sans--cascivo-leading-normal--cascivo-color-text--cascivo-text-base--cascivo-space-1--cascivo-space-6
When to use
- Presenting a set of related items as a bulleted or numbered list
- Conveying sequence with an ordered list (as="ol")
- Keeping list semantics while hiding visual markers (marker="none")
When not to use
- Tabular data with multiple columns — use DataTable
- Interactive navigation items — use SideNav or a menu
How to build an accessible List in React →
Examples
Unordered
<List><ListItem>Tokens</ListItem><ListItem>Themes</ListItem></List>Ordered
<List as="ol"><ListItem>Init</ListItem><ListItem>Add</ListItem></List>Unmarked
Keeps list semantics without visual markers
<List marker="none"><ListItem>Clean row</ListItem></List>Related components
- Text — ListItem content is typically body Text