Skip to content

List

A native, styled list element with lis items inside.


  • Item 1
  • Item 2
  • Item 3
---
import { List, ListItem } from 'fulldev-ui'
---
<List>
<ListItem>Item 1</ListItem>
<ListItem>Item 2</ListItem>
<ListItem>Item 3</ListItem>
</List>

Props

items

Type: (ListItem | string)[]

  • Item 1
  • Item 2
---
import { List } from 'fulldev-ui'
---
<List items={['Item 1', { text: 'Item 2' }]} />

item.text

Type: text?: string

Useful when getting content from Astro content collections or a headless CMS.

item.html

Type: html?: string

Similar to text prop, but renders HTML. Use this for for <span>, <br>, etc.

li HTMLAttributes

All HTML <li> attributes are accepted as props too.

size

Type: size?: 'sm' | 'md' | 'lg'

Sets the size for this component and all its 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']} />

density

Type: density?: 'base' | 'compact' | string

Changes the underlying values used by the size prop, for this component and all its children.

For example, we set compact on a card and can now size this and all children automatically based on the size on the wrapping block/section.

Choose a predefined density, or a custom value defined like explained in the theming guide.

  • Item 1
  • Item 2
  • Item 1
  • Item 2
  • Item 1
  • Item 2
---
import { List } from 'fulldev-ui'
---
<List density="compact" size="sm" items={['Item 1', 'Item 2']} />
<List density="compact" size="md" items={['Item 1', 'Item 2']} />
<List density="compact" size="lg" items={['Item 1', 'Item 2']} />

variant

Type: color?: 'base' | 'muted'

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 variant="base" items={['Item 1', 'Item 2']} />
<List variant="muted" items={['Item 1', 'Item 2']} />

theme

Type: theme?: 'light' | 'dark' | string

Changes the colors for this component and all its children.

Choose a predefined theme, or a custom value defined like explained in the theming guide.

HTML Attributes

All regular HTML attributes for the <list> element are accepted as props too.