List
A native, styled list element with list items inside.
- Item 1
- Item 2
- Item 3
Props
Prop | Type | Default |
---|---|---|
items | string[] | - |
size | xs | sm | md | lg | xl | - |
color | base | accent | - |
contrast | boolean | - |
as | HTMLTag | ul |
HTML Attributes | Polymorphic<as> | - |
Examples
items
- Item 1
- Item 2
---import { List } from 'fulldev-ui'---
<List items={['Item 1', { text: 'Item 2' }]} />
size
The size prop cascades: it is inherited from the parent and it is applied to all children.
- Item 1
- Item 2
- Item 1
- Item 2
- Item 1
- Item 2
---import { List } from 'fulldev-ui'---
<List size="sm" items={['Item 1', 'Item 2']} /><List size="md" items={['Item 1', 'Item 2']} /><List size="lg" items={['Item 1', 'Item 2']} />
color
Sets the color variant used for this component and all its children.
- Item 1
- Item 2
- Item 1
- Item 2
---import { List } from 'fulldev-ui'---
<List color="base" items={['Item 1', 'Item 2']} /><List color="brand" items={['Item 1', 'Item 2']} />
contrast
Set to true
by default on Headings, which you can override by setting it to false
.
- Item 1
- Item 2
---import { List } from 'fulldev-ui'---
<List contrast={false} items={['Item 1', 'Item 2']} />