List

A bulleted or numbered list.

It implements the <ul> or <ol> element.

Props

ordered

TypeBoolean (optional)
Defaultfalse

If false, a <ul> element is used to display a bulleted list. Otherwise, a <ol> element is used to display a numbered list

...props

Type…* (optional)

Additional props for the container; either a <ul> or <ol> element.

Examples

Bulleted list.
import { List } from 'device-agnostic-ui'

<List>
  <li>Eat healthy</li>
  <li>Sleep well</li>
  <li>Exercise regularly</li>
</List>
  • Eat healthy
  • Sleep well
  • Exercise regularly
Nested paragraphs and bulleted lists.
import { List, Para } from 'device-agnostic-ui'

<List>
  <li>Lorum ipsum.</li>
  <li>
    <Para>Lorum ipsum.</Para>
    <List>
      <li>Lorum ipsum.</li>
      <li>
        <Para>Lorum ipsum.</Para>
        <List>
          <li>Lorum ipsum.</li>
          <li>Lorum ipsum.</li>
        </List>
      </li>
    </List>
  </li>
</List>
  • Lorum ipsum.
  • Lorum ipsum.

    • Lorum ipsum.
    • Lorum ipsum.

      • Lorum ipsum.
      • Lorum ipsum.
Numbered list.
import { List } from 'device-agnostic-ui'

<List ordered>
  <li>Pichu</li>
  <li>Pikachu</li>
  <li>Raichu</li>
</List>
  1. Pichu
  2. Pikachu
  3. Raichu
Nested paragraphs and ordered lists.
import { List, Para } from 'device-agnostic-ui'

<List ordered>
  <li>Lorum ipsum.</li>
  <li>
    <Para>Lorum ipsum.</Para>
    <List ordered>
      <li>Lorum ipsum.</li>
      <li>
        <Para>Lorum ipsum.</Para>
        <List ordered>
          <li>Lorum ipsum.</li>
          <li>Lorum ipsum.</li>
        </List>
      </li>
    </List>
  </li>
</List>
  1. Lorum ipsum.
  2. Lorum ipsum.

    1. Lorum ipsum.
    2. Lorum ipsum.

      1. Lorum ipsum.
      2. Lorum ipsum.

Tags