Skip to content
Fulldev UI

List

A native, styled list element with list items inside.
  • Item 1
  • Item 2
  • Item 3
--- 
import { List } from 'fulldev-ui'
---

<List
  items={["Item 1","Item 2","Item 3"]}
  size="md"
  color="base"
  contrast={false}
/>

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']} />