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>

<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>

<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>

<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>

<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>

<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>

<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>

<List>
  <li>apples</li>
  <li>citrus</li>
  <li>melons</li>
  <List>
    <li>oranges</li>
    <li>grapefruits</li>
  </List>
</List>

Result

Loading...

Props

Name	Type	Default
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.