List

A structured content surface with multiple configurations.

Polymorphic Component

By default, content is rendered inside a <ul>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Small List

Leading Text
Meta
Trailing text
Leading Text
Meta
Leading Text
Meta
Leading Text
Trailing text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Trailing text
Leading Text
Meta
Trailing text

Leading Text
Meta
Trailing text
Leading Text
Meta
Leading Text
Meta
Leading Text
Trailing text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Trailing text
Leading Text
Meta
Trailing text

<List size="small">
  <ListItem
    title="Leading Text"
    meta="Meta"
    titleEnd="Trailing text"
    iconStart="..."
    iconEnd="..."
  />
</List>

Medium List

Leading Text
Meta
Trailing text
Leading Text
Meta
Leading Text
Meta
Leading Text
Trailing text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text

Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Trailing text
Leading Text
Meta
Trailing text

<List size="medium">
  <ListItem
    title="Leading Text"
    meta="Meta"
    titleEnd="Trailing text"
    iconStart="..."
    iconEnd="..."
  />
</List>

Large List

Leading Text
Meta
Trailing text
Leading Text
Meta
Leading Text
Meta
Leading Text
Trailing text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text

Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Trailing text
Leading Text
Meta
Trailing text

<List size="large">
  <ListItem
    title="Leading Text"
    meta="Meta"
    titleEnd="Trailing text"
    iconStart="..."
    iconEnd="..."
  />
</List>

Extra Large List

Leading Text
Subtext
Trailing text
Leading Text
Trailing text
Leading Text
Leading Text
Trailing text
Subtext
Leading Text
Subtext

<List size="xlarge">
  <ListItem
    title="Leading Text"
    meta="Meta"
    titleEnd="Trailing text"
    iconStart="..."
    iconEnd="..."
  />
</List>

Props

Name	Type	Default Value	Required	Description
`size`	`"small" \| "medium" \| "large" \| "xlarge" \| ListSize`	`ListSize.Medium`	No	Which size list should be displayed?

Examples​

Small List​

Medium List​

Large List​

Extra Large List​

Props​