Back to site

List

Lists items with icons 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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 an icon list with support for vertical or horizontal layouts, custom styling, alignment, and markdown formatting. For standard bullet or numbered lists, use Rich Text instead.

Properties

items array | default: array

Array of list items.

Item Properties:

_component string | default: building-blocks/core-elements/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

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

Directions

  • First vertical list item
  • Second vertical list item
  • Third vertical list item 
---
import List from "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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
---

AlignX

  • First list item
  • Second list item
  • Third list item 
---
import List from "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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
---

Sizes

  • First item
  • Second item
  • Third item 
---
import List from "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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
---

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 "@components/building-blocks/core-elements/list.astro";
import ListItem from "@components/building-blocks/core-elements/list/list-item.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
---