Components
Structure
List

List

Import statement

import { List, ListItem } from "@wfp/react"

Common ListBaseProps for all kinds of lists:

PropertyTypeDefaultDescription
colonbooleanfalseIf true, colons will be displayed in the List items.
kindstring (see kinds below)nullSpecifies the visual presentation style of the List.
smallbooleanfalseIf true, renders the List with a smaller font size and padding.

Kinds of Lists

  • unstyled
  • simple-inline
  • simple
  • details
  • unordered
  • ordered
  • tooltip
  • bullets

Extended Props

Depending on the kind of list chosen, the component may also accept all standard attributes for either an <ul> or a <ol> tag.

Using Different Kinds

simple

Simple vertical list.

Editable Example

<List kind="simple">
  <ListItem>First Item</ListItem>
  <ListItem>Second Item</ListItem>
  {/* More ListItems ... */}
</List>;

simple Inline

Simple horizontal list.

Editable Example

<List kind="simple-inline">
  <ListItem>First Item</ListItem>
  <ListItem>Second Item</ListItem>
</List>;

bullets

Adds bullets in front of each list entry.

Editable Example

<List kind="bullets">
  <ListItem>First Item</ListItem>
  <ListItem>Second Item</ListItem>
</List>;

ordered

Creates an ordered list

Editable Example

<List kind="ordered">
  <li>First Item</li>
  <li>Second Item</li>
</List>;

details

Detail view here the content is on a new line and the title is bold.

Editable Example

<List kind="details">
  <ListItem>First Item</ListItem>
  <ListItem>Second Item</ListItem>
</List>;

Displaying Colons

Adding colons after each title

Editable Example

<List colon={true} kind="details">
  <ListItem title="First">Item with colon</ListItem>
  <ListItem title="Second">
    Another item with colon
  </ListItem>
</List>;

Using Small Styling

Uses a smaller font-size for the list.

Editable Example

<List small={true}>
  <ListItem>Small styled item</ListItem>
  <ListItem>Another small styled item</ListItem>
</List>;

On this page

References