List & ListItem

<List> outputs a <ul> tag, and <ListItem> outputs a <li> tag.

<List> is an alias for <Lism as="ul">, and <ListItem> is an alias for <Lism as="li">. All Lism Props are available.
<List> as prop: ul(default) / ol / dl
<ListItem> as prop: li(default) / dt / dd

Import

import { List, ListItem } from 'lism-css/react';

Basic Usage

↓

<List> output example

List item 1
List item 2
List item 3

<List>
  <ListItem>List item 1</ListItem>
  <ListItem>List item 2</ListItem>
  <ListItem>List item 3</ListItem>
</List>

Ordered List

Use as="ol" to output an <ol> tag.

↓

<List as="ol"> output example

List item 1
List item 2
List item 3

<List as="ol">
  <ListItem>List item 1</ListItem>
  <ListItem>List item 2</ListItem>
  <ListItem>List item 3</ListItem>
</List>

Definition List

Use <List as="dl"> with <ListItem as="dt"> and <ListItem as="dd"> to create a definition list.

↓

<List as="dl"> output example

Term 1: Description for term 1.
Term 2: Description for term 2.

<List as="dl">
  <ListItem as="dt" fw="bold">
    Term 1
  </ListItem>
  <ListItem as="dd">Description for term 1.</ListItem>
  <ListItem as="dt" fw="bold">
    Term 2
  </ListItem>
  <ListItem as="dd">Description for term 2.</ListItem>
</List>