Atlas

List

Bulleted, numbered, icon and inline lists, built either from an array of strings or from item children.

<x-atlas::list>

The list ships as two tags: atlas::list for the container and atlas::list.item for a row. There are two ways to fill it — item children, or an items array — and they are mutually exclusive.

  • Free shipping over 50 euro
  • Thirty-day returns
  • Two-year warranty 
<x-atlas::list>
    <x-atlas::list.item>Free shipping over 50 euro</x-atlas::list.item>
    <x-atlas::list.item>Thirty-day returns</x-atlas::list.item>
    <x-atlas::list.item>Two-year warranty</x-atlas::list.item>
</x-atlas::list>
Preview follows the site's light/dark mode. Open standalone →

From an array

Hand the list an array or Collection of strings and it renders the items for you. Use this when the content already exists as data — an ACF repeater, a config array, a model attribute — and there is nothing per-item to vary. Write out atlas::list.item children instead when an item needs its own icon, a link, or any markup at all: the array path escapes its strings and cannot hold components.

  • Free shipping over 50 euro
  • Thirty-day returns
  • Two-year warranty 
<x-atlas::list :items="['Free shipping over 50 euro', 'Thirty-day returns', 'Two-year warranty']" />
Preview follows the site's light/dark mode. Open standalone →

items wins. If it is set to anything truthy the default slot is never rendered, so a list with both an array and children silently drops the children. An empty array falls through to the slot.

Ordered lists

variant is really the element name: ul or ol. Use ol only when reordering the items would change their meaning. The role="list" that Safari needs to keep announcing a styled list as a list is added for ul only.

  1. Choose your product
  2. Pick a delivery date
  3. Pay and confirm 
<x-atlas::list variant="ol">
    <x-atlas::list.item>Choose your product</x-atlas::list.item>
    <x-atlas::list.item>Pick a delivery date</x-atlas::list.item>
    <x-atlas::list.item>Pay and confirm</x-atlas::list.item>
</x-atlas::list>
Preview follows the site's light/dark mode. Open standalone →

Icons

An icon takes the place of the marker: the list drops its bullets and indent, and each row becomes a flex line with the icon at the front. Icons pick up the list's primary color and the body font size, so they stay level with the text as the type scale changes. Any name from the icon set works — a tick for features, a cross for exclusions.

  • Free shipping over 50 euro
  • Thirty-day returns
  • Two-year warranty
  • Included in every plan
  • Not available on the free tier 
<x-atlas::list icon="fas-check" :items="['Free shipping over 50 euro', 'Thirty-day returns', 'Two-year warranty']" />

<x-atlas::list icon="fas-check">
    <x-atlas::list.item icon="fas-check">Included in every plan</x-atlas::list.item>
    <x-atlas::list.item icon="fas-xmark">Not available on the free tier</x-atlas::list.item>
</x-atlas::list>
Preview follows the site's light/dark mode. Open standalone →

The icon prop on atlas::list is only passed down when the items come from items. With item children it removes the bullets but renders nothing, leaving an unmarked list — which is why the second list above sets icon on the list and on every item. Set it in both places, or use the array form.

Inline layout

layout="vertical" lays the items out in a wrapping horizontal row with a dot between them — the name describes the separators, not the direction. It suits short metadata such as a byline or a tag row; it is not a substitute for a real prose list. vertical is the only value with styles behind it.

  • Amsterdam
  • 12 March 2026
  • Four minutes to read 
<x-atlas::list layout="vertical" :items="['Amsterdam', '12 March 2026', 'Four minutes to read']" />
Preview follows the site's light/dark mode. Open standalone →

Icon

Renders an Atlas component icon or a Font Awesome icon, inline and sized against the surrounding text.

Description

A small, muted block of supporting text. No props — it exists so secondary copy is styled the same everywhere.

Heading

Headings that keep the document outline and the type scale independent, and throw rather than render something wrong.

Reference

<x-atlas::list>

  • Name
    variant
    Type
    ul | ol
    Default
    default: ul
    Description
    The element to render. Despite the name this is the tag, not a style. A ul also gets role="list".
  • Name
    items
    Type
    array | Collection | null
    Default
    default: null
    Description
    Strings to render as items. When set, the default slot is ignored entirely.
  • Name
    icon
    Type
    string | null
    Default
    default: null
    Description
    Icon name for every item. Only reaches the items when they come from items; with slot children it just removes the bullets.
  • Name
    layout
    Type
    vertical | null
    Default
    default: null
    Description
    Set to vertical for an inline row of items separated by dots. Anything else is ignored.

Slots

  • Name
    default
    Type
    slot
    Description
    One or more atlas::list.item children. Ignored when items is set.

<x-atlas::list.item>

  • Name
    item
    Type
    string | null
    Default
    default: null
    Description
    Item text. Used by the parent when building from items; falls back to the slot when null.
  • Name
    icon
    Type
    string | null
    Default
    default: null
    Description
    Icon rendered before the text. Set this per item when you are using slot children.

Slots

  • Name
    default
    Type
    slot
    Description
    The item text. Ignored if item is set.