Atlas

Heading

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

<x-atlas::heading>

Every other heading component makes you choose between the right element and the right size. Atlas splits them: level is the semantics, size is the look, and neither one drags the other along.

Shipping and returns 

<x-atlas::heading :level="2">Shipping and returns</x-atlas::heading>
Preview follows the site's light/dark mode. Open standalone →

Levels

level is a number from 1 to 6 and decides the element. Bind it — :level="3" — because Blade otherwise hands the component the string "3", and a string is where this component starts being strict.

Level 1

Level 2

Level 3

Level 4

Level 5
Level 6 
<x-atlas::heading :level="1">Level 1</x-atlas::heading>
<x-atlas::heading :level="2">Level 2</x-atlas::heading>
<x-atlas::heading :level="3">Level 3</x-atlas::heading>
<x-atlas::heading :level="4">Level 4</x-atlas::heading>
<x-atlas::heading :level="5">Level 5</x-atlas::heading>
<x-atlas::heading :level="6">Level 6</x-atlas::heading>
Preview follows the site's light/dark mode. Open standalone →

Sizes

Omit size and it mirrors the level, so a level 3 gets h3 type. Set it and the element stops mattering to the eye. Alongside display and h1–h6 you get the body scale — xl, lg, base, sm, xs — for headings that need to sit quietly inside a card or a sidebar.

Display

h1

h2

h3

h4

h5

h6

xl

lg

base

sm

xs 

<x-atlas::heading :level="2" size="display">Display</x-atlas::heading>
<x-atlas::heading :level="2" size="h1">h1</x-atlas::heading>
<x-atlas::heading :level="2" size="h2">h2</x-atlas::heading>
<x-atlas::heading :level="2" size="h3">h3</x-atlas::heading>
<x-atlas::heading :level="2" size="h4">h4</x-atlas::heading>
<x-atlas::heading :level="2" size="h5">h5</x-atlas::heading>
<x-atlas::heading :level="2" size="h6">h6</x-atlas::heading>
<x-atlas::heading :level="2" size="xl">xl</x-atlas::heading>
<x-atlas::heading :level="2" size="lg">lg</x-atlas::heading>
<x-atlas::heading :level="2" size="base">base</x-atlas::heading>
<x-atlas::heading :level="2" size="sm">sm</x-atlas::heading>
<x-atlas::heading :level="2" size="xs">xs</x-atlas::heading>
Preview follows the site's light/dark mode. Open standalone →

Level and size are independent

This is the whole point of the component. Reach for it whenever the outline and the layout disagree: a hero title that must remain the page's only h1 but wants display type, or a fourth-level subheading in a dense table that should still read as xs. Pick the level from the document structure, then pick the size from the design — never demote a heading to h4 to make it smaller.

Working at Atlas

Open roles

Front-end engineer 

<x-atlas::heading :level="1" size="display">Working at Atlas</x-atlas::heading>
<x-atlas::heading :level="2" size="xs">Open roles</x-atlas::heading>
<x-atlas::heading :level="3" size="h1">Front-end engineer</x-atlas::heading>
Preview follows the site's light/dark mode. Open standalone →

It throws on invalid input

Both props are validated at render time and raise Atlas\Exceptions\HeadingException rather than quietly producing the wrong markup. The two mistakes worth knowing about:

Both of these throw

<x-atlas::heading level="h1">A tag name is not a level</x-atlas::heading>

<x-atlas::heading :level="1" size="huge">"huge" is not a size</x-atlas::heading>

The first reports use a numeric level (1–6), not "h1". The second lists every allowed size back to you, so the fix is in the message.

The string check only catches the h1–h6 shape. A level that is out of range or not a number at all — :level="9", level="foo" — is not an error: it falls back to level 2 and renders an h2. If a level comes from a CMS field or a config value, validate it before it reaches the component.

With a description

Pair a heading with description for a section intro. The description carries its own top margin, so no wrapper is needed.

Delivery times

Orders placed before 22:00 on a working day ship the same evening. 
<x-atlas::heading :level="2" size="h3">Delivery times</x-atlas::heading>
<x-atlas::description>Orders placed before 22:00 on a working day ship the same evening.</x-atlas::description>
Preview follows the site's light/dark mode. Open standalone →

Description

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

Text link

An inline anchor with an animated underline and optional icons that slide outwards on hover.

List

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

Reference

<x-atlas::heading>

  • Name
    level
    Type
    int (1–6)
    Default
    default: 2
    Description
    Semantic level. Decides the element: 1 renders h1, 6 renders h6. Passing a string like "h1" throws a HeadingException; a number outside 1–6 silently falls back to level 2.
  • Name
    size
    Type
    display | h1 | h2 | h3 | h4 | h5 | h6 | xl | lg | base | sm | xs
    Default
    default: matches level
    Description
    Visual size, independent of the element. An unrecognised value throws a HeadingException listing the allowed values.

Slots

  • Name
    default
    Type
    slot
    Description
    The heading text.