Demo Block

Usage

Blocks are larger, copyable interface patterns built from existing 5h3ll-ui components. They follow the same rule as the component docs: semantic HTML first, framework-free behavior, and shadcn-style visual language through 5h3ll-ui tokens.

Demo block

Launch dashboard

A compact overview block for product, finance, or operations pages.

Revenue

$24,892

+12.8% this month

Active users

8,204

+804 this week

Conversion

6.84%

Stable trend

Release checklist

Block internals use normal 5h3ll-ui markup.

Task	Status
Token pass	Ready
Responsive QA	Review
Docs copy	Draft

<section class="grid gap-4 md:grid-cols-[1.2fr_0.8fr]">
  <article class="card">
    <header>
      <div>
        <span class="badge" data-variant="secondary">Demo block</span>
        <h2 class="mt-3">Launch dashboard</h2>
        <p>A compact overview block for product, finance, or operations pages.</p>
      </div>
      <div class="card-action">
        <button type="button" class="btn" data-variant="outline">Export</button>
      </div>
    </header>
    <section class="grid gap-4 sm:grid-cols-3">
      <div class="rounded-md border bg-muted/40 p-4">
        <p class="text-sm text-muted-foreground">Revenue</p>
        <p class="mt-2 text-2xl font-semibold tabular-nums">$24,892</p>
        <p class="mt-1 text-sm text-muted-foreground">+12.8% this month</p>
      </div>
      <div class="rounded-md border bg-muted/40 p-4">
        <p class="text-sm text-muted-foreground">Active users</p>
        <p class="mt-2 text-2xl font-semibold tabular-nums">8,204</p>
        <p class="mt-1 text-sm text-muted-foreground">+804 this week</p>
      </div>
      <div class="rounded-md border bg-muted/40 p-4">
        <p class="text-sm text-muted-foreground">Conversion</p>
        <p class="mt-2 text-2xl font-semibold tabular-nums">6.84%</p>
        <p class="mt-1 text-sm text-muted-foreground">Stable trend</p>
      </div>
    </section>
    <footer>
      <button type="button" class="btn">Open report</button>
      <button type="button" class="btn" data-variant="ghost">View activity</button>
    </footer>
  </article>
  <article class="card">
    <header>
      <h2>Release checklist</h2>
      <p>Block internals use normal 5h3ll-ui markup.</p>
    </header>
    <section>
      <div class="table-container">
        <table class="table">
          <thead>
            <tr><th>Task</th><th>Status</th></tr>
          </thead>
          <tbody>
            <tr><td>Token pass</td><td><span class="badge" data-variant="outline">Ready</span></td></tr>
            <tr><td>Responsive QA</td><td><span class="badge" data-variant="secondary">Review</span></td></tr>
            <tr><td>Docs copy</td><td><span class="badge">Draft</span></td></tr>
          </tbody>
        </table>
      </div>
    </section>
  </article>
</section>

HTML

<section class="grid gap-4 md:grid-cols-[1.2fr_0.8fr]">
  <article class="card">
    <header>
      <div>
        <span class="badge" data-variant="secondary">Demo block</span>
        <h2 class="mt-3">Launch dashboard</h2>
        <p>A compact overview block for product, finance, or operations pages.</p>
      </div>
      <div class="card-action">
        <button type="button" class="btn" data-variant="outline">Export</button>
      </div>
    </header>
    <section class="grid gap-4 sm:grid-cols-3">
      <div class="rounded-md border bg-muted/40 p-4">
        <p class="text-sm text-muted-foreground">Revenue</p>
        <p class="mt-2 text-2xl font-semibold tabular-nums">$24,892</p>
        <p class="mt-1 text-sm text-muted-foreground">+12.8% this month</p>
      </div>
    </section>
    <footer>
      <button type="button" class="btn">Open report</button>
      <button type="button" class="btn" data-variant="ghost">View activity</button>
    </footer>
  </article>
</section>

Notes

This first block is intentionally small. Future Blocks pages can add larger shadcn-style patterns such as dashboards, authentication screens, settings forms, marketing sections, and data cards while keeping the output plain HTML.