Breakpoints

Six responsive tiers drive every layout shift. Resize the window — the live indicator tracks the active tier in real time.

Positioning Color tokens
Live

Active tier

Drag your window edge to watch it change.

Viewport px
--ax-bp-*

Reference table

The token, its min-width and what changes at each step. The current row is highlighted.

Token Min Range Typical target
Sidebar collapses to an overlay below --ax-bp-md; the boxed-max container engages at --ax-bp-2xl.
In practice

How the grid collapses

The same four-up KPI row and 8+4 hero re-flow across the tiers — resize to feel it.

4 × .ax-col--3 → halves (≤992) → full (≤576)
.ax-col--8 + .ax-col--4 → stacked full-width (≤992)
ax-col--8 · hero
ax-col--4 · rail