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.

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="vertical" size="md">
  <ListItem iconName="check">Lists with icons are helpful for emphasis.</ListItem>
  <ListItem iconName="lock-closed">One list item can go over <br> two lines.</ListItem>
  <ListItem iconName="briefcase">Lists can include formatting like <strong>bold</strong> or <em>italic text</em>.</ListItem>
</List>

---
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
  alignX: start
  size: md
---

Overview

Displays a list with icons, bullets, or numbers as markers. Supports vertical or horizontal layouts, custom styling, alignment, and markdown formatting.

Properties

items array | default: array

Array of list items.

Item Properties:

_component string | default: building-blocks/core-elements/list/list-item

text string | default: List item

The text to display in the list item.

iconName enum

The name of the icon to display from the icon library.

iconColor enum | default: default

The color of the icon.

Accepted values:

default
blue
green
yellow
orange
red
purple
pink
cyan

direction enum | default: vertical

The direction in which list items are arranged.

Accepted values:

horizontal
vertical

alignX 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):

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

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="vertical" listType="icon" size="md">
  <ListItem iconName="check">Lists with icons are helpful for emphasis.</ListItem>
  <ListItem iconName="lock-closed">One list item can go over <br> two lines.</ListItem>
  <ListItem iconName="briefcase">Lists can include formatting like <strong>bold</strong> or <em>italic text</em>.</ListItem>
</List>

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

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="vertical" listType="bullet" size="md">
  <ListItem>First bullet list item</ListItem>
  <ListItem>Second bullet list item with <strong>bold text</strong></ListItem>
  <ListItem>Third bullet list item with <em>italic text</em></ListItem>
  <ListItem>Lists can include formatting and <br> line breaks</ListItem>
</List>

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

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="vertical" listType="numbered" size="md">
  <ListItem>First numbered list item</ListItem>
  <ListItem>Second numbered list item with <strong>bold text</strong></ListItem>
  <ListItem>Third numbered list item with <em>italic text</em></ListItem>
  <ListItem>Lists can include formatting and <br> line breaks</ListItem>
</List>

---
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
  alignX: start
  size: md
  listType: numbered
---

Directions

First vertical list item

Second vertical list item

Third vertical list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="vertical" size="md">
  <ListItem iconName="bolt">First vertical list item</ListItem>
  <ListItem iconName="bolt">Second vertical list item</ListItem>
  <ListItem iconName="bolt">Third vertical list item</ListItem>
</List>

---
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
    alignX: start
    size: md
---

First horizontal list item

Second horizontal list item

Third horizontal list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="md">
  <ListItem iconName="bolt">First horizontal list item</ListItem>
  <ListItem iconName="bolt">Second horizontal list item</ListItem>
  <ListItem iconName="bolt">Third horizontal list item</ListItem>
</List>

---
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
    alignX: start
    size: md
---

First horizontal bullet item

Second horizontal bullet item

Third horizontal bullet item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" listType="bullet" size="md">
  <ListItem>First horizontal bullet item</ListItem>
  <ListItem>Second horizontal bullet item</ListItem>
  <ListItem>Third horizontal bullet item</ListItem>
</List>

---
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
    alignX: start
    size: md
    listType: bullet
---

First horizontal numbered item

Second horizontal numbered item

Third horizontal numbered item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" listType="numbered" size="md">
  <ListItem>First horizontal numbered item</ListItem>
  <ListItem>Second horizontal numbered item</ListItem>
  <ListItem>Third horizontal numbered item</ListItem>
</List>

---
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
    alignX: start
    size: md
    listType: numbered
---

AlignX

First list item

Second list item

Third list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="vertical" size="md">
  <ListItem iconName="check-circle">First list item</ListItem>
  <ListItem iconName="check-circle">Second list item</ListItem>
  <ListItem iconName="check-circle">Third list item</ListItem>
</List>

---
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
    alignX: start
    size: md
---

First list item

Second list item

Third list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="center" direction="vertical" size="md">
  <ListItem iconName="check-circle">First list item</ListItem>
  <ListItem iconName="check-circle">Second list item</ListItem>
  <ListItem iconName="check-circle">Third list item</ListItem>
</List>

---
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
    alignX: center
    size: md
---

First list item

Second list item

Third list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="end" direction="vertical" size="md">
  <ListItem iconName="check-circle">First list item</ListItem>
  <ListItem iconName="check-circle">Second list item</ListItem>
  <ListItem iconName="check-circle">Third list item</ListItem>
</List>

---
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
    alignX: end
    size: md
---

First list item

Second list item

Third list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="md">
  <ListItem iconName="check-circle">First list item</ListItem>
  <ListItem iconName="check-circle">Second list item</ListItem>
  <ListItem iconName="check-circle">Third list item</ListItem>
</List>

---
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
    alignX: start
    size: md
---

First list item

Second list item

Third list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="center" direction="horizontal" size="md">
  <ListItem iconName="check-circle">First list item</ListItem>
  <ListItem iconName="check-circle">Second list item</ListItem>
  <ListItem iconName="check-circle">Third list item</ListItem>
</List>

---
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
    alignX: center
    size: md
---

First list item

Second list item

Third list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="end" direction="horizontal" size="md">
  <ListItem iconName="check-circle">First list item</ListItem>
  <ListItem iconName="check-circle">Second list item</ListItem>
  <ListItem iconName="check-circle">Third list item</ListItem>
</List>

---
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
    alignX: end
    size: md
---

First list item

Second list item

Third list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="center" direction="vertical" listType="bullet" size="md">
  <ListItem>First list item</ListItem>
  <ListItem>Second list item</ListItem>
  <ListItem>Third list item</ListItem>
</List>

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

First list item

Second list item

Third list item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="end" direction="horizontal" listType="numbered" size="md">
  <ListItem>First list item</ListItem>
  <ListItem>Second list item</ListItem>
  <ListItem>Third list item</ListItem>
</List>

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

Sizes

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="xs">
  <ListItem iconName="arrow-down-right">First item</ListItem>
  <ListItem iconName="arrow-down-right">Second item</ListItem>
  <ListItem iconName="arrow-down-right">Third item</ListItem>
</List>

---
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
    alignX: start
    size: xs
---

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="sm">
  <ListItem iconName="arrow-down-right">First item</ListItem>
  <ListItem iconName="arrow-down-right">Second item</ListItem>
  <ListItem iconName="arrow-down-right">Third item</ListItem>
</List>

---
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
    alignX: start
    size: sm
---

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="md">
  <ListItem iconName="arrow-down-right">First item</ListItem>
  <ListItem iconName="arrow-down-right">Second item</ListItem>
  <ListItem iconName="arrow-down-right">Third item</ListItem>
</List>

---
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
    alignX: start
    size: md
---

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="lg">
  <ListItem iconName="arrow-down-right">First item</ListItem>
  <ListItem iconName="arrow-down-right">Second item</ListItem>
  <ListItem iconName="arrow-down-right">Third item</ListItem>
</List>

---
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
    alignX: start
    size: lg
---

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="xl">
  <ListItem iconName="arrow-down-right">First item</ListItem>
  <ListItem iconName="arrow-down-right">Second item</ListItem>
  <ListItem iconName="arrow-down-right">Third item</ListItem>
</List>

---
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
    alignX: start
    size: xl
---

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="2xl">
  <ListItem iconName="arrow-down-right">First item</ListItem>
  <ListItem iconName="arrow-down-right">Second item</ListItem>
  <ListItem iconName="arrow-down-right">Third item</ListItem>
</List>

---
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
    alignX: start
    size: 2xl
---

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="3xl">
  <ListItem iconName="arrow-down-right">First item</ListItem>
  <ListItem iconName="arrow-down-right">Second item</ListItem>
  <ListItem iconName="arrow-down-right">Third item</ListItem>
</List>

---
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
    alignX: start
    size: 3xl
---

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" size="4xl">
  <ListItem iconName="arrow-down-right">First item</ListItem>
  <ListItem iconName="arrow-down-right">Second item</ListItem>
  <ListItem iconName="arrow-down-right">Third item</ListItem>
</List>

---
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
    alignX: start
    size: 4xl
---

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" listType="numbered" size="lg">
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</List>

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

First item

Second item

Third item

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="horizontal" listType="bullet" size="3xl">
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</List>

---
blocks:
  - _component: building-blocks/core-elements/list
    items:
      - text: First item
      - text: Second item
      - text: Third item
    direction: horizontal
    alignX: 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

---
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
---

<List alignX="start" direction="vertical" size="md">
  <ListItem iconColor="default" iconName="hand-thumb-up">Default color icon</ListItem>
  <ListItem iconColor="blue" iconName="hand-thumb-up">Blue color icon</ListItem>
  <ListItem iconColor="green" iconName="hand-thumb-up">Green color icon</ListItem>
  <ListItem iconColor="yellow" iconName="hand-thumb-up">Yellow color icon</ListItem>
  <ListItem iconColor="orange" iconName="hand-thumb-up">Orange color icon</ListItem>
  <ListItem iconColor="red" iconName="hand-thumb-up">Red color icon</ListItem>
  <ListItem iconColor="purple" iconName="hand-thumb-up">Purple color icon</ListItem>
  <ListItem iconColor="pink" iconName="hand-thumb-up">Pink color icon</ListItem>
  <ListItem iconColor="cyan" iconName="hand-thumb-up">Cyan color icon</ListItem>
</List>

---
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
  alignX: start
  size: md
---