STATUS TRACKER: Vertical application-status timeline
COMPOSES: .step-indicator (marker sizing) | state trios (marker/title color) | .small (timestamp)
STATES: .status-tracker-item-complete | .status-tracker-item-current | .status-tracker-item-blocked | (no modifier = upcoming)

A parent/applicant's "where is my application" view — one row per milestone, connected by a vertical rail. No Stimulus controller: state is server-rendered per item. The current step carries aria-current="step"; markers pair color with a distinct icon or number so state never reads from color alone.

Application journey

Typical flow: two completed milestones, one current (under review), one upcoming. Upcoming steps use no state modifier — .step-indicator's own default neutral fill communicates "not yet reached" without extra classes.

  1. Application submitted

    12 March 2026 · 10:42am

    We've received Emma Thompson's Year 7 application for St Mary's Academy.

  2. Documents verified

    14 March 2026 · 3:15pm

    We checked the proof of address and birth certificate you uploaded — both are clear.

  3. Under review

    Started 18 March 2026

    The admissions panel is reviewing the application against this year's entry criteria.

  4. Decision

    Expected by 2 April 2026

    You'll get an email and a letter in the post with the outcome.

<ol class="status-tracker"><li class="status-tracker-item status-tracker-item-complete"><span class="step-indicator status-tracker-marker" aria-hidden="true"><i class="fa-solid fa-check"></i></span><div><p class="status-tracker-title">…</p><p class="status-tracker-meta small">…</p><p class="status-tracker-detail">…</p></div></li>…<li class="status-tracker-item status-tracker-item-current" aria-current="step">…</li></ol>

Blocked — action needed

Blocked step: danger-trio marker + danger-ink title, paired with an exclamation icon and a plain-language recovery action — never color alone. Steps after a blocker stay in the default "upcoming" state until it clears. The title row also carries a .badge-status .badge-status-negative "Action needed" pill — an optional status-badge slot for surfacing blocked items in a scanning context (e.g. a dashboard list of applications) without reading the full detail sentence.

  1. Application submitted

    2 March 2026 · 9:05am

    We've received Josh Patel's Year 9 in-year application for Riverside High.

  2. Action needed — missing document

    Action needed

    Waiting since 6 March 2026

    We're missing proof of address for this application. Upload it so the panel can continue reviewing.

    Upload missing document

  3. Under review

    Starts once the missing document above is uploaded.

<li class="status-tracker-item status-tracker-item-blocked"><span class="step-indicator status-tracker-marker" aria-hidden="true"><i class="fa-solid fa-triangle-exclamation"></i></span><div><div class="tw:flex tw:items-center tw:gap-2"><p class="status-tracker-title">Action needed — missing document</p><span class="badge-status badge-status-negative">Action needed</span></div><p class="status-tracker-detail">…</p><a href="#" class="tw:text-link …">Upload missing document</a></div></li>

Compact — no timestamps

Compact use: for a dashboard summary widget, omit .status-tracker-meta entirely — no separate class is needed, the pattern composes down naturally when a row only has a title and (optionally) a detail line.

  1. Submitted

  2. Under review

  3. Decision

<li class="status-tracker-item status-tracker-item-complete"><span class="step-indicator status-tracker-marker" aria-hidden="true"><i class="fa-solid fa-check"></i></span><div><p class="status-tracker-title">Submitted</p></div></li>