List

Displays items in a list with icons as markers

Lists are great for listing things
They can even go over
two lines
Lists can include formatting like bold or italic text.

_bookshop_name: primitives/list
items:
  - text: Lists are great for listing things
    icon: check
  - text: They can even go over <br> two lines
    icon: lock-closed
  - text: Lists can include formatting like **bold** or *italic text*.
    icon: briefcase
direction: vertical
horizontalAlignment: start
size: md

Properties

items array

direction enum | default: vertical

Accepted values:

horizontal
vertical

horizontalAlignment enum | default: start

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

Examples

Directions

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

- _bookshop_name: primitives/list
  items:
    - text: First vertical list item
      icon: bolt
    - text: Second vertical list item
      icon: bolt
    - text: Third vertical list item
      icon: bolt
  direction: vertical
  horizontalAlignment: start
  size: md

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

- _bookshop_name: primitives/list
  items:
    - text: First horizontal list item
      icon: bolt
    - text: Second horizontal list item
      icon: bolt
    - text: Third horizontal list item
      icon: bolt
  direction: horizontal
  horizontalAlignment: start
  size: md

Horizontal Alignments

First list item
Second list item
Third list item

- _bookshop_name: primitives/list
  items:
    - text: First list item
      icon: check-circle
    - text: Second list item
      icon: check-circle
    - text: Third list item
      icon: check-circle
  direction: vertical
  horizontalAlignment: start
  size: md

First list item
Second list item
Third list item

- _bookshop_name: primitives/list
  items:
    - text: First list item
      icon: check-circle
    - text: Second list item
      icon: check-circle
    - text: Third list item
      icon: check-circle
  direction: vertical
  horizontalAlignment: center
  size: md

First list item
Second list item
Third list item

- _bookshop_name: primitives/list
  items:
    - text: First list item
      icon: check-circle
    - text: Second list item
      icon: check-circle
    - text: Third list item
      icon: check-circle
  direction: vertical
  horizontalAlignment: end
  size: md

First list item
Second list item
Third list item

- _bookshop_name: primitives/list
  items:
    - text: First list item
      icon: check-circle
    - text: Second list item
      icon: check-circle
    - text: Third list item
      icon: check-circle
  direction: horizontal
  horizontalAlignment: start
  size: md

First list item
Second list item
Third list item

- _bookshop_name: primitives/list
  items:
    - text: First list item
      icon: check-circle
    - text: Second list item
      icon: check-circle
    - text: Third list item
      icon: check-circle
  direction: horizontal
  horizontalAlignment: center
  size: md

First list item
Second list item
Third list item

- _bookshop_name: primitives/list
  items:
    - text: First list item
      icon: check-circle
    - text: Second list item
      icon: check-circle
    - text: Third list item
      icon: check-circle
  direction: horizontal
  horizontalAlignment: end
  size: md

Sizes

First Item
Second Item
Third Item

- _bookshop_name: primitives/list
  items:
    - text: First Item
      icon: arrow-down-right
    - text: Second Item
      icon: arrow-down-right
    - text: Third Item
      icon: arrow-down-right
  direction: horizontal
  horizontalAlignment: start
  size: xs

First Item
Second Item
Third Item

- _bookshop_name: primitives/list
  items:
    - text: First Item
      icon: arrow-down-right
    - text: Second Item
      icon: arrow-down-right
    - text: Third Item
      icon: arrow-down-right
  direction: horizontal
  horizontalAlignment: start
  size: sm

First Item
Second Item
Third Item

- _bookshop_name: primitives/list
  items:
    - text: First Item
      icon: arrow-down-right
    - text: Second Item
      icon: arrow-down-right
    - text: Third Item
      icon: arrow-down-right
  direction: horizontal
  horizontalAlignment: start
  size: md

First Item
Second Item
Third Item

- _bookshop_name: primitives/list
  items:
    - text: First Item
      icon: arrow-down-right
    - text: Second Item
      icon: arrow-down-right
    - text: Third Item
      icon: arrow-down-right
  direction: horizontal
  horizontalAlignment: start
  size: lg

First Item
Second Item
Third Item

- _bookshop_name: primitives/list
  items:
    - text: First Item
      icon: arrow-down-right
    - text: Second Item
      icon: arrow-down-right
    - text: Third Item
      icon: arrow-down-right
  direction: horizontal
  horizontalAlignment: start
  size: xl

First Item
Second Item
Third Item

- _bookshop_name: primitives/list
  items:
    - text: First Item
      icon: arrow-down-right
    - text: Second Item
      icon: arrow-down-right
    - text: Third Item
      icon: arrow-down-right
  direction: horizontal
  horizontalAlignment: start
  size: 2xl