Timeline Block

Usage

This block groups process-oriented timeline patterns for onboarding, releases, approvals, project delivery, or deal-stage tracking.

Timeline block preview

Resize the frame to test how stacked timelines and milestone rails behave across widths.

Width1120px

Process

Closing timeline

Vertical sequence for staged approvals, inspections, handoffs, and delivery dates.

Offer acceptedApr 20

InspectionApr 29

AppraisalMay 6

ClosingMay 22

Milestones

Launch rail

Horizontal milestone treatment for launch plans and project progress.

✓DesignApr 2

✓BuildApr 12

3QAApr 22

4LaunchMay 3

Delivery checklist

A supporting process card that pairs naturally with both timeline patterns.

Copy approved

Messaging locked for release and sales handoff.

Stakeholders notified

Ops, support, and finance have signed off on timing.

Final review

Pending launch-day walk-through with the team.

<section class="rounded-xl border bg-card text-card-foreground shadow-xs" data-resizable-preview>
  <header class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <div class="min-w-0">
      <p class="text-sm font-medium">Timeline block preview</p>
      <p class="text-xs text-muted-foreground">Resize the frame to test how stacked timelines and milestone rails behave across widths.</p>
    </div>
    <div class="ms-auto flex flex-wrap items-center gap-2">
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="375">Mobile</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="768">Tablet</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="1120">Desktop</button>
      <button type="button" class="btn" data-variant="ghost" data-size="sm" data-preview-preset="1280">Full</button>
    </div>
  </header>
  <div class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <label class="text-xs font-medium text-muted-foreground" for="timeline-block-range">Width</label>
    <input id="timeline-block-range" class="w-full min-w-40 flex-1 accent-primary" type="range" min="360" max="1280" value="1120" data-preview-range />
    <output class="rounded-md bg-muted px-2.5 py-1 font-mono text-xs tabular-nums" data-preview-output>1120px</output>
  </div>
  <div class="overflow-x-auto bg-muted/30 p-4 md:p-6">
    <div class="mx-auto w-full max-w-full overflow-hidden rounded-xl border bg-background shadow-sm transition-[width] duration-150" data-preview-viewport>
      <div class="w-full p-4 md:p-6">
<section class="grid gap-4 xl:grid-cols-[0.95fr_1.05fr]">
  <article class="card rounded-[calc(var(--radius-xl)+4px)] border p-5 sm:p-6">
    <header>
      <span class="badge" data-variant="secondary">Process</span>
      <h2 class="mt-3 text-2xl">Closing timeline</h2>
      <p>Vertical sequence for staged approvals, inspections, handoffs, and delivery dates.</p>
    </header>
    <section class="mt-4 flex flex-col">
      <div class="relative flex items-center gap-3 pb-4">
        <span class="absolute bottom-0 left-2.5 top-6 w-px bg-primary"></span>
        <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-primary bg-primary text-primary-foreground"><span class="h-2 w-2 rounded-full bg-current"></span></span>
        <div class="flex flex-1 items-center justify-between gap-3 text-sm">
          <span class="font-medium">Offer accepted</span>
          <span class="font-mono text-xs text-muted-foreground">Apr 20</span>
        </div>
      </div>
      <div class="relative flex items-center gap-3 pb-4">
        <span class="absolute bottom-0 left-2.5 top-6 w-px bg-border"></span>
        <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-primary bg-primary/15"><span class="h-2 w-2 rounded-full bg-primary"></span></span>
        <div class="flex flex-1 items-center justify-between gap-3 text-sm">
          <span class="font-medium">Inspection</span>
          <span class="font-mono text-xs text-muted-foreground">Apr 29</span>
        </div>
      </div>
      <div class="relative flex items-center gap-3 pb-4">
        <span class="absolute bottom-0 left-2.5 top-6 w-px bg-border"></span>
        <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-border bg-background"></span>
        <div class="flex flex-1 items-center justify-between gap-3 text-sm">
          <span class="text-muted-foreground">Appraisal</span>
          <span class="font-mono text-xs text-muted-foreground">May 6</span>
        </div>
      </div>
      <div class="relative flex items-center gap-3">
        <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-border bg-background"></span>
        <div class="flex flex-1 items-center justify-between gap-3 text-sm">
          <span class="text-muted-foreground">Closing</span>
          <span class="font-mono text-xs text-muted-foreground">May 22</span>
        </div>
      </div>
    </section>
  </article>

  <div class="grid gap-4">
    <article class="card rounded-[calc(var(--radius-xl)+4px)] border p-5 sm:p-6">
      <header>
        <span class="badge" data-variant="outline">Milestones</span>
        <h2 class="mt-3">Launch rail</h2>
        <p>Horizontal milestone treatment for launch plans and project progress.</p>
      </header>
      <section class="mt-5">
        <div class="relative mx-auto w-full">
          <span class="absolute left-3 right-3 top-2.5 h-0.5 bg-border"></span>
          <span class="absolute left-3 top-2.5 h-0.5 bg-primary" style="width: calc((100% - 1.5rem) * 0.6667)"></span>
          <div class="relative z-10 grid grid-cols-4 gap-2">
            <div class="flex flex-col items-center gap-1 text-center">
              <span class="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">✓</span>
              <span class="text-xs text-muted-foreground">Design</span>
              <span class="font-mono text-xs text-muted-foreground">Apr 2</span>
            </div>
            <div class="flex flex-col items-center gap-1 text-center">
              <span class="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">✓</span>
              <span class="text-xs text-muted-foreground">Build</span>
              <span class="font-mono text-xs text-muted-foreground">Apr 12</span>
            </div>
            <div class="flex flex-col items-center gap-1 text-center">
              <span class="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground ring-2 ring-primary ring-offset-2">3</span>
              <span class="text-xs font-semibold">QA</span>
              <span class="font-mono text-xs text-muted-foreground">Apr 22</span>
            </div>
            <div class="flex flex-col items-center gap-1 text-center">
              <span class="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">4</span>
              <span class="text-xs text-muted-foreground">Launch</span>
              <span class="font-mono text-xs text-muted-foreground">May 3</span>
            </div>
          </div>
        </div>
      </section>
    </article>

    <article class="card rounded-[calc(var(--radius-xl)+4px)] border bg-muted/20 p-5 sm:p-6">
      <header>
        <h2>Delivery checklist</h2>
        <p>A supporting process card that pairs naturally with both timeline patterns.</p>
      </header>
      <section class="space-y-3">
        <label class="item gap-3 rounded-xl border px-4 py-3">
          <input type="checkbox" class="input" checked />
          <section><h3>Copy approved</h3><p>Messaging locked for release and sales handoff.</p></section>
        </label>
        <label class="item gap-3 rounded-xl border px-4 py-3">
          <input type="checkbox" class="input" checked />
          <section><h3>Stakeholders notified</h3><p>Ops, support, and finance have signed off on timing.</p></section>
        </label>
        <label class="item gap-3 rounded-xl border px-4 py-3">
          <input type="checkbox" class="input" />
          <section><h3>Final review</h3><p>Pending launch-day walk-through with the team.</p></section>
        </label>
      </section>
    </article>
  </div>
</section>
      </div>
    </div>
  </div>
</section>

This page shows two different process metaphors on purpose: a vertical event-by-event sequence and a horizontal milestone rail. Both are composed using the public 5h3ll-ui surface instead of one-off fragment styling.