Lists

Semantic typography prose list component supporting bulleted, numbered, alpha, and roman numeral markers.

// Plain markup
import { List, ListItem } from "@shavin/ui";

Unordered List (bullet)

1st level of distinction: 5,000 ounces of gold.
2nd level of distinction: 10,000 ounces of silver.
3rd level of distinction: 20,000 ounces of bronze.

Component Source

<List marker="bullet">
  <ListItem>1st level of distinction: 5,000 ounces of gold.</ListItem>
  <ListItem>2nd level of distinction: 10,000 ounces of silver.</ListItem>
  <ListItem>3rd level of distinction: 20,000 ounces of bronze.</ListItem>
</List>

Ordered List — Decimal (1, 2, 3)

1st level of distinction: 5,000 ounces of gold.
2nd level of distinction: 10,000 ounces of silver.
3rd level of distinction: 20,000 ounces of bronze.

Component Source

<List marker="number">
  <ListItem>1st level of distinction: 5,000 ounces of gold.</ListItem>
  <ListItem>2nd level of distinction: 10,000 ounces of silver.</ListItem>
  <ListItem>3rd level of distinction: 20,000 ounces of bronze.</ListItem>
</List>

Ordered List — Lower Roman (i, ii, iii)

1st level of distinction: 5,000 ounces of gold.
2nd level of distinction: 10,000 ounces of silver.
3rd level of distinction: 20,000 ounces of bronze.

Component Source

<List marker="lower-roman">
  <ListItem>1st level of distinction: 5,000 ounces of gold.</ListItem>
  <ListItem>2nd level of distinction: 10,000 ounces of silver.</ListItem>
  <ListItem>3rd level of distinction: 20,000 ounces of bronze.</ListItem>
</List>

Ordered List — Upper Roman (I, II, III)

1st level of distinction: 5,000 ounces of gold.
2nd level of distinction: 10,000 ounces of silver.
3rd level of distinction: 20,000 ounces of bronze.

Component Source

<List marker="upper-roman">
  <ListItem>1st level of distinction: 5,000 ounces of gold.</ListItem>
  <ListItem>2nd level of distinction: 10,000 ounces of silver.</ListItem>
  <ListItem>3rd level of distinction: 20,000 ounces of bronze.</ListItem>
</List>

Ordered List — Lower Alpha (a, b, c)

1st level of distinction: 5,000 ounces of gold.
2nd level of distinction: 10,000 ounces of silver.
3rd level of distinction: 20,000 ounces of bronze.

Component Source

<List marker="lower-alpha">
  <ListItem>1st level of distinction: 5,000 ounces of gold.</ListItem>
  <ListItem>2nd level of distinction: 10,000 ounces of silver.</ListItem>
  <ListItem>3rd level of distinction: 20,000 ounces of bronze.</ListItem>
</List>

Ordered List — Upper Alpha (A, B, C)

1st level of distinction: 5,000 ounces of gold.
2nd level of distinction: 10,000 ounces of silver.
3rd level of distinction: 20,000 ounces of bronze.

Component Source

<List marker="upper-alpha">
  <ListItem>1st level of distinction: 5,000 ounces of gold.</ListItem>
  <ListItem>2nd level of distinction: 10,000 ounces of silver.</ListItem>
  <ListItem>3rd level of distinction: 20,000 ounces of bronze.</ListItem>
</List>

Plain List (no marker)

1st level of distinction: 5,000 ounces of gold.
2nd level of distinction: 10,000 ounces of silver.
3rd level of distinction: 20,000 ounces of bronze.

Component Source

<List marker="none">
  <ListItem>1st level of distinction: 5,000 ounces of gold.</ListItem>
  <ListItem>2nd level of distinction: 10,000 ounces of silver.</ListItem>
  <ListItem>3rd level of distinction: 20,000 ounces of bronze.</ListItem>
</List>

Nested Lists

Primary item
1. Sub-item A
2. Sub-item B
  1. Tertiary i
  2. Tertiary ii
Second primary item
Third primary item

Component Source

<List marker="number">
  <ListItem>
    Primary item
    <List marker="lower-alpha" className="mt-1.5">
      <ListItem>Sub-item A</ListItem>
      <ListItem>
        Sub-item B
        <List marker="lower-roman" className="mt-1.5">
          <ListItem>Tertiary i</ListItem>
          <ListItem>Tertiary ii</ListItem>
        </List>
      </ListItem>
    </List>
  </ListItem>
  <ListItem>Second primary item</ListItem>
  <ListItem>Third primary item</ListItem>
</List>

List or CardList?

List is for prose. For bordered, clickable rows use CardList.

This is a CardList, not a Listsee Card

List is for prose. For bordered, clickable rows use CardList.

<CardList>
  <CardListItem className="cursor-pointer">
    <span className="flex-1">This is a CardList, not a List</span>
    <span className="text-sm text-fg-muted">see Card</span>
  </CardListItem>
</CardList>

Props

Prop	Type	Default	Description
as	"ul" \| "ol"	—	Underlying tag type override: "ul" (unordered list) or "ol" (ordered list). Auto-inferred if marker is set.
marker	"bullet" \| "number" \| "lower-roman" \| "upper-roman" \| "lower-alpha" \| "upper-alpha" \| "none"	"bullet"	—