List

Lists items with icons, bullets, or numbers as markers.

Lists with icons are helpful for emphasis.
One list item can go over
two lines.
Lists can include formatting like bold or italic text.

---
blocks:
  _component: building-blocks/core-elements/list
  items:
    - text: Lists with icons are helpful for emphasis.
      iconName: check
    - text: One list item can go over <br> two lines.
      iconName: lock-closed
    - text: Lists can include formatting like **bold** or *italic text*.
      iconName: briefcase
  direction: vertical
  alignmentHorizontal: start
  size: md
---

Overview #

Displays a list with icons, bullets, or numbers as markers. Supports vertical or horizontal layouts, custom styling, alignment, markdown formatting, and optional per-item links on the text (icons stay outside the anchor).

Properties #

items array | default: array

Array of list items.

Item Properties:

text string | default: List item

The text to display in the list item.

iconName enum

The name of the icon to display. Sourced from [Heroicons](https://heroicons.com/).

iconColor enum | default: default

The color of the icon.

Accepted values:

default
blue
green
yellow
orange
red
purple
pink
cyan

link string

Optional URL. When set, only the text is linked; the icon stays outside the anchor (e.g. table of contents or external services).

direction enum | default: vertical

The direction in which list items are arranged.

Accepted values:

horizontal
vertical

alignmentHorizontal enum | default: start

The horizontal alignment of the list items.

Accepted values:

start
center
end

size enum | default: md

Controls the size of the icon and text.

Accepted values:

xs
sm
md
lg
xl
2xl
3xl
4xl

listType enum | default: icon

The style of list markers (icons, bullets, or numbers).

Accepted values:

icon
bullet
numbered

Slots #

default

The content inside the List. Used only when the items property is not set.

Child Component:

<ListItem>

Properties (documented under the items property above):

iconName
iconColor
showIcon
link
text/slot

Examples #

List Types #

Lists with icons are helpful for emphasis.
One list item can go over
two lines.
Lists can include formatting like bold or italic text.

---
blocks:
  _component: building-blocks/core-elements/list
  items:
    - text: Lists with icons are helpful for emphasis.
      iconName: check
    - text: One list item can go over <br> two lines.
      iconName: lock-closed
    - text: Lists can include formatting like **bold** or *italic text*.
      iconName: briefcase
  direction: vertical
  alignmentHorizontal: start
  size: md
  listType: icon
---

First bullet list item
Second bullet list item with bold text
Third bullet list item with italic text
Lists can include formatting and
line breaks

---
blocks:
  _component: building-blocks/core-elements/list
  items:
    - text: First bullet list item
    - text: Second bullet list item with **bold text**
    - text: Third bullet list item with *italic text*
    - text: Lists can include formatting and <br> line breaks
  direction: vertical
  alignmentHorizontal: start
  size: md
  listType: bullet
---

First numbered list item
Second numbered list item with bold text
Third numbered list item with italic text
Lists can include formatting and
line breaks

---
blocks:
  _component: building-blocks/core-elements/list
  items:
    - text: First numbered list item
    - text: Second numbered list item with **bold text**
    - text: Third numbered list item with *italic text*
    - text: Lists can include formatting and <br> line breaks
  direction: vertical
  alignmentHorizontal: start
  size: md
  listType: numbered
---

Directions #

First vertical list item
Second vertical list item
Third vertical list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First vertical list item
        iconName: bolt
      - text: Second vertical list item
        iconName: bolt
      - text: Third vertical list item
        iconName: bolt
    direction: vertical
    alignmentHorizontal: start
    size: md
---

First horizontal list item
Second horizontal list item
Third horizontal list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First horizontal list item
        iconName: bolt
      - text: Second horizontal list item
        iconName: bolt
      - text: Third horizontal list item
        iconName: bolt
    direction: horizontal
    alignmentHorizontal: start
    size: md
---

First horizontal bullet item
Second horizontal bullet item
Third horizontal bullet item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First horizontal bullet item
      - text: Second horizontal bullet item
      - text: Third horizontal bullet item
    direction: horizontal
    alignmentHorizontal: start
    size: md
    listType: bullet
---

First horizontal numbered item
Second horizontal numbered item
Third horizontal numbered item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First horizontal numbered item
      - text: Second horizontal numbered item
      - text: Third horizontal numbered item
    direction: horizontal
    alignmentHorizontal: start
    size: md
    listType: numbered
---

AlignX #

First list item
Second list item
Third list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First list item
        iconName: check-circle
      - text: Second list item
        iconName: check-circle
      - text: Third list item
        iconName: check-circle
    direction: vertical
    alignmentHorizontal: start
    size: md
---

First list item
Second list item
Third list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First list item
        iconName: check-circle
      - text: Second list item
        iconName: check-circle
      - text: Third list item
        iconName: check-circle
    direction: vertical
    alignmentHorizontal: center
    size: md
---

First list item
Second list item
Third list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First list item
        iconName: check-circle
      - text: Second list item
        iconName: check-circle
      - text: Third list item
        iconName: check-circle
    direction: vertical
    alignmentHorizontal: end
    size: md
---

First list item
Second list item
Third list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First list item
        iconName: check-circle
      - text: Second list item
        iconName: check-circle
      - text: Third list item
        iconName: check-circle
    direction: horizontal
    alignmentHorizontal: start
    size: md
---

First list item
Second list item
Third list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First list item
        iconName: check-circle
      - text: Second list item
        iconName: check-circle
      - text: Third list item
        iconName: check-circle
    direction: horizontal
    alignmentHorizontal: center
    size: md
---

First list item
Second list item
Third list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First list item
        iconName: check-circle
      - text: Second list item
        iconName: check-circle
      - text: Third list item
        iconName: check-circle
    direction: horizontal
    alignmentHorizontal: end
    size: md
---

First list item
Second list item
Third list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First list item
      - text: Second list item
      - text: Third list item
    direction: vertical
    alignmentHorizontal: center
    size: md
    listType: bullet
---

First list item
Second list item
Third list item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First list item
      - text: Second list item
      - text: Third list item
    direction: horizontal
    alignmentHorizontal: end
    size: md
    listType: numbered
---

Sizes #

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
        iconName: arrow-down-right
      - text: Second item
        iconName: arrow-down-right
      - text: Third item
        iconName: arrow-down-right
    direction: horizontal
    alignmentHorizontal: start
    size: xs
---

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
        iconName: arrow-down-right
      - text: Second item
        iconName: arrow-down-right
      - text: Third item
        iconName: arrow-down-right
    direction: horizontal
    alignmentHorizontal: start
    size: sm
---

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
        iconName: arrow-down-right
      - text: Second item
        iconName: arrow-down-right
      - text: Third item
        iconName: arrow-down-right
    direction: horizontal
    alignmentHorizontal: start
    size: md
---

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
        iconName: arrow-down-right
      - text: Second item
        iconName: arrow-down-right
      - text: Third item
        iconName: arrow-down-right
    direction: horizontal
    alignmentHorizontal: start
    size: lg
---

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
        iconName: arrow-down-right
      - text: Second item
        iconName: arrow-down-right
      - text: Third item
        iconName: arrow-down-right
    direction: horizontal
    alignmentHorizontal: start
    size: xl
---

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
        iconName: arrow-down-right
      - text: Second item
        iconName: arrow-down-right
      - text: Third item
        iconName: arrow-down-right
    direction: horizontal
    alignmentHorizontal: start
    size: 2xl
---

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
        iconName: arrow-down-right
      - text: Second item
        iconName: arrow-down-right
      - text: Third item
        iconName: arrow-down-right
    direction: horizontal
    alignmentHorizontal: start
    size: 3xl
---

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
        iconName: arrow-down-right
      - text: Second item
        iconName: arrow-down-right
      - text: Third item
        iconName: arrow-down-right
    direction: horizontal
    alignmentHorizontal: start
    size: 4xl
---

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
      - text: Second item
      - text: Third item
    direction: horizontal
    alignmentHorizontal: start
    size: lg
    listType: numbered
---

First item
Second item
Third item

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
      - text: Second item
      - text: Third item
    direction: horizontal
    alignmentHorizontal: start
    size: 3xl
    listType: bullet
---

Icon colors #

Default color icon
Blue color icon
Green color icon
Yellow color icon
Orange color icon
Red color icon
Purple color icon
Pink color icon
Cyan color icon

---
blocks:
  _component: building-blocks/core-elements/list
  items:
    - text: Default color icon
      iconName: hand-thumb-up
      iconColor: default
    - text: Blue color icon
      iconName: hand-thumb-up
      iconColor: blue
    - text: Green color icon
      iconName: hand-thumb-up
      iconColor: green
    - text: Yellow color icon
      iconName: hand-thumb-up
      iconColor: yellow
    - text: Orange color icon
      iconName: hand-thumb-up
      iconColor: orange
    - text: Red color icon
      iconName: hand-thumb-up
      iconColor: red
    - text: Purple color icon
      iconName: hand-thumb-up
      iconColor: purple
    - text: Pink color icon
      iconName: hand-thumb-up
      iconColor: pink
    - text: Cyan color icon
      iconName: hand-thumb-up
      iconColor: cyan
  direction: vertical
  alignmentHorizontal: start
  size: md
---

Linked items #

Same-site path (table of contents, cross-page links)
External URL (e.g. a third-party service)
Plain row with no link

---
blocks:
  _component: building-blocks/core-elements/list
  items:
    - text: Same-site path (table of contents, cross-page links)
      iconName: link
      iconColor: green
      link: /component-docs/
    - text: External URL (e.g. a third-party service)
      iconName: arrow-top-right-on-square
      iconColor: green
      link: https://example.com/
    - text: Plain row with no link
      iconName: minus
      iconColor: green
  direction: vertical
  alignmentHorizontal: start
  size: md
  listType: icon
---