Skip to main content

List

This component is used to render ordered and unordered lists.

Example

Live Editor
<List ordered>
  <li>
    apples and <span style={{ color: 'green' }}>green apples</span>
  </li>
  <li>citrus</li>
  <li>
    melons <a url="#">fruits</a>
  </li>
</List>
Result
Loading...

Usage Rules

Do

  • Use List as the parent wrapper
  • Wrap all direct children on <li> tags
  • Add any necessary markup inside the <li> tags

Don't

  • Nest any other html tag as direct child of List

Variants

Extended

The list can also have the extended prop. In this case the space between items increases.

Live Editor
<List extended>
  <li>
    {' '}
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </li>
  <li> Ullamco laboris nisi ut aliquip</li>
  <li>
    {' '}
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.{' '}
  </li>
</List>
Result
Loading...
Live Editor
<List ordered extended>
  <li>
    {' '}
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </li>
  <li> Ullamco laboris nisi ut aliquip</li>
  <li>
    {' '}
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.{' '}
  </li>
</List>
Result
Loading...

Kind

We have two kinds of lists, ordered and unordered. If the prop ordered is not set, it defaults to unordered.

Live Editor
<List ordered>
  <li>apples</li>
  <li>citrus</li>
  <li>melons</li>
</List>
Result
Loading...
Live Editor
<List>
  <li>apples</li>
  <li>citrus</li>
  <li>melons</li>
</List>
Result
Loading...

Nested

List component supports nesting. You can mix ordered and unordered lists if neccesary.

Live Editor
<List ordered>
  <li>apples</li>
  <li>citrus</li>
  <li>melons</li>
  <List ordered>
    <li>oranges</li>
    <li>grapefruits</li>
  </List>
</List>
Result
Loading...

Different levels will have different bullets in the case of unordered.

Live Editor
<List>
  <li>apples</li>
  <li>citrus</li>
  <li>melons</li>
  <List>
    <li>oranges</li>
    <li>grapefruits</li>
  </List>
</List>
Result
Loading...

Props

NameTypeDefault
ordered
Changes to the ordered type of list using an <ol>
boolean
false
extended
Adds a wider space between <li> elements
boolean
false
children
The content of the List
ReactNode
css
Add custom styles to this component. Use with caution. Learn more here: Link
SupportedStyleAttributes
inputFieldCss
SupportedStyleAttributes
data-{foo}
Data attributes can be used by testing libraries to retrieve components or assert their existence
string
* - the prop is required.