Cards Status Board

Fetch pattern JSON: curl https://webspire.de/patterns/cards/status-board.json

status-board.html

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">

    <!-- Header -->
    <div class="mb-10">
      <p class="mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[var(--ws-cards-accent)]">Mission Control</p>
      <h2 class="text-2xl font-bold tracking-tight text-[var(--ws-cards-text)]">Active tasks</h2>
      <p class="mt-1.5 text-sm text-[var(--ws-cards-text-soft)]">3 tasks in progress · 2 ready for review · 1 completed today</p>
    </div>

    <!-- Board — horizontal scroll on mobile -->
    <div class="flex gap-5 overflow-x-auto pb-4 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0" role="list" aria-label="Task board">

      <!-- Column: In Progress -->
      <div class="min-w-[280px] flex-shrink-0 sm:min-w-0" role="group" aria-labelledby="col-progress">
        <div class="mb-3 flex items-center gap-2" id="col-progress">
          <span class="h-2 w-2 rounded-full bg-blue-500" aria-hidden="true"></span>
          <span class="text-sm font-semibold text-[var(--ws-cards-text)]">In Progress</span>
          <span class="ml-auto rounded-full bg-[var(--ws-cards-border)] px-2 py-0.5 text-xs font-medium text-[var(--ws-cards-text-muted)]">3</span>
        </div>
        <ul class="space-y-3">
          <li class="rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-card-bg)] p-4 shadow-sm">
            <div class="mb-2 flex items-start justify-between gap-2">
              <p class="text-sm font-medium leading-snug text-[var(--ws-cards-text)]">Add OAuth login flow</p>
              <span class="shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Auth</span>
            </div>
            <p class="text-xs text-[var(--ws-cards-text-muted)]">Implementing GitHub + Google providers with session handling</p>
            <div class="mt-3 flex items-center gap-2">
              <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--ws-cards-border)]">
                <div class="h-full w-2/3 rounded-full bg-blue-500"></div>
              </div>
              <span class="text-xs text-[var(--ws-cards-text-muted)]">65%</span>
            </div>
          </li>
          <li class="rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-card-bg)] p-4 shadow-sm">
            <div class="mb-2 flex items-start justify-between gap-2">
              <p class="text-sm font-medium leading-snug text-[var(--ws-cards-text)]">Refactor billing service</p>
              <span class="shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">Backend</span>
            </div>
            <p class="text-xs text-[var(--ws-cards-text-muted)]">Extracting Stripe webhook logic into dedicated service layer</p>
            <div class="mt-3 flex items-center gap-2">
              <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--ws-cards-border)]">
                <div class="h-full w-1/3 rounded-full bg-amber-500"></div>
              </div>
              <span class="text-xs text-[var(--ws-cards-text-muted)]">30%</span>
            </div>
          </li>
          <li class="rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-card-bg)] p-4 shadow-sm">
            <div class="mb-2 flex items-start justify-between gap-2">
              <p class="text-sm font-medium leading-snug text-[var(--ws-cards-text)]">Dashboard telemetry charts</p>
              <span class="shrink-0 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">Frontend</span>
            </div>
            <p class="text-xs text-[var(--ws-cards-text-muted)]">Line chart + sparklines for the analytics overview panel</p>
            <div class="mt-3 flex items-center gap-2">
              <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--ws-cards-border)]">
                <div class="h-full w-4/5 rounded-full bg-violet-500"></div>
              </div>
              <span class="text-xs text-[var(--ws-cards-text-muted)]">80%</span>
            </div>
          </li>
        </ul>
      </div>

      <!-- Column: Ready for Review -->
      <div class="min-w-[280px] flex-shrink-0 sm:min-w-0" role="group" aria-labelledby="col-review">
        <div class="mb-3 flex items-center gap-2" id="col-review">
          <span class="h-2 w-2 rounded-full bg-amber-500" aria-hidden="true"></span>
          <span class="text-sm font-semibold text-[var(--ws-cards-text)]">Ready for Review</span>
          <span class="ml-auto rounded-full bg-[var(--ws-cards-border)] px-2 py-0.5 text-xs font-medium text-[var(--ws-cards-text-muted)]">2</span>
        </div>
        <ul class="space-y-3">
          <li class="rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-card-bg)] p-4 shadow-sm">
            <div class="mb-2 flex items-start justify-between gap-2">
              <p class="text-sm font-medium leading-snug text-[var(--ws-cards-text)]">Onboarding flow redesign</p>
              <span class="shrink-0 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">Frontend</span>
            </div>
            <p class="text-xs text-[var(--ws-cards-text-muted)]">Multi-step onboarding with progress indicator and skip logic</p>
            <div class="mt-3 flex items-center gap-2 text-xs text-[var(--ws-cards-text-muted)]">
              <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 14 14" aria-hidden="true"><path d="M1 7h12M9 3l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
              PR #284 · 3 comments
            </div>
          </li>
          <li class="rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-card-bg)] p-4 shadow-sm">
            <div class="mb-2 flex items-start justify-between gap-2">
              <p class="text-sm font-medium leading-snug text-[var(--ws-cards-text)]">Email notification templates</p>
              <span class="shrink-0 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Content</span>
            </div>
            <p class="text-xs text-[var(--ws-cards-text-muted)]">Welcome, password reset and invoice email templates in React Email</p>
            <div class="mt-3 flex items-center gap-2 text-xs text-[var(--ws-cards-text-muted)]">
              <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 14 14" aria-hidden="true"><path d="M1 7h12M9 3l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
              PR #281 · 1 comment
            </div>
          </li>
        </ul>
      </div>

      <!-- Column: Done -->
      <div class="min-w-[280px] flex-shrink-0 sm:min-w-0" role="group" aria-labelledby="col-done">
        <div class="mb-3 flex items-center gap-2" id="col-done">
          <span class="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true"></span>
          <span class="text-sm font-semibold text-[var(--ws-cards-text)]">Done</span>
          <span class="ml-auto rounded-full bg-[var(--ws-cards-border)] px-2 py-0.5 text-xs font-medium text-[var(--ws-cards-text-muted)]">1</span>
        </div>
        <ul class="space-y-3">
          <li class="rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-card-bg)] p-4 opacity-70 shadow-sm">
            <div class="mb-2 flex items-start justify-between gap-2">
              <p class="text-sm font-medium leading-snug text-[var(--ws-cards-text)] line-through decoration-[var(--ws-cards-text-muted)]">API rate limit middleware</p>
              <span class="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600">Backend</span>
            </div>
            <p class="text-xs text-[var(--ws-cards-text-muted)]">Token bucket algorithm with per-user and per-IP limits</p>
            <div class="mt-3 flex items-center gap-1.5 text-xs text-emerald-600">
              <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 7l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
              Merged · April 3, 2026
            </div>
          </li>
        </ul>
      </div>

    </div>
  </div>
</section>

Details

Family

cards

Tier

enhanced

Kind

section

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

kanbanstatusboardtasksmission-controlprogresscolumns

Slots

Name	Required	Description
column-header	Yes	Spalten-Label mit farbigem Status-Dot und Zähler-Badge.
task-card	Yes	Task-Karte mit Titel, Kategorie-Badge, Beschreibung und Fortschrittsbalken.
progress-bar	No	Optionaler Fortschrittsbalken für In-Progress Tasks.
pr-link	No	PR-Nummer und Kommentaranzahl für Review-Tasks.

Drei-Spalten Status-Board (In Progress / Ready for Review / Done) mit farbigen Status-Dots, Zähler-Badges und Task-Cards. Fortschrittsbalken zeigen Prozentsätze für laufende Aufgaben. Auf Mobile horizontal scrollbar via overflow-x-auto — kein Layout-Bruch. Semantisch korrekt mit role="list", role="group" und aria-labelledby.