dashbook
Marketing / Content blocks

StepTimeline.

A numbered process block with two layouts. `timeline` (default) stacks 44px rounded step tiles down a 1px hairline rail, each with a "Step n" eyebrow, display title, body copy and optional nested sub-blocks. `flow` lays the same steps out as a 2/3/4-column card grid with a dotted connector and a per-card accent bar. Accent is cobalt or jade.

Stable src/components/sections/StepTimeline.astro

When to use

Reach for StepTimeline when a process is explicitly sequential and the connection between steps matters — onboarding, an audit-to-recovery flow, a multi-stage rollout. Use the `timeline` variant when steps need room to explain themselves (it takes body copy up to 58ch and can nest sub-blocks); use `flow` when the steps are short enough to scan side by side. Note that it renders only the list — the section eyebrow, heading and lede are the page's job.

  1. Step 01

    Connect

    Link your carrier accounts once. No CSV exports, no shared logins.

  2. Step 02

    Audit

    Every invoice is re-priced against your contract the day it posts.

    • Dimensional reweigh

      Re-measured against the filed contract, not the carrier scan.

    • Service downgrade

      Overnight billed where ground was delivered.

  3. Step 03

    Recover

    We file the claims and track each credit back to the invoice that earned it.

timeline · accent jade
  1. 01

    Step 01

    Connect

    Link your carrier accounts once. No CSV exports, no shared logins.

  2. 02

    Step 02

    Audit

    Every invoice is re-priced against your contract the day it posts.

  3. 03

    Step 03

    Recover

    We file the claims and track each credit back to the invoice that earned it.

flow · accent cobalt (default)

There is no horizontal rail: flow is a card grid with a three-dot connector (from 1024px), a head strip and a decorative 30 / 65 / 100% foot bar — not the timeline rotated. The node is a 44px rounded tile, not a circle, and it shows either a SectionIcon glyph or the step's own authored n string; it is aria-hidden, so the "Step {n}" eyebrow is the only textual ordinal. The connector is flex: 1 and takes its length from the copy column's bottom padding, fading out over its last 30% so it never reaches the next tile. n is authored, never derived — reordering the array does not renumber.