Cards Block

Usage

This block collects compact cards into a single copyable gallery. The goal is to show how smaller interface fragments can become reusable 5h3ll-ui patterns without promoting each one into a standalone public component.
Cards block preview
Resize the frame to check how compact card patterns regroup across the grid.
Width1120px
Social 5h3ll

Principal • 5h3ll Studio
hello@ui.5h3ll.site +90 532 000 12 34 ui.5h3ll.site
Master Services Agreement

MSA-2026-0421
Party A5h3ll Technologies Inc.
Party BSocial 5h3ll Studio
EffectiveMay 1, 2026
Awaiting counter-signature
Heat Advisory

Advisory
Heat index up to 38C this afternoon. Stay hydrated and avoid direct sun.
Until 9:00 PM tonight
20% OFF

Coffee & Pastries
BREW20Expires Jun 30
Steps

of 10,000
8,42084%
6.4 km310 kcal
Student ID

Elara Martin
Grade 7 • 7B
Redwood Middle School
STD-24-00281
<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">Cards block preview</p>
      <p class="text-xs text-muted-foreground">Resize the frame to check how compact card patterns regroup across the grid.</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="cards-block-range">Width</label>
    <input id="cards-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 place-items-center gap-4 sm:grid-cols-2 xl:grid-cols-3">
  <article class="flex w-full max-w-80 flex-col gap-2 rounded-xl border bg-card p-3 shadow-sm">
    <header class="flex flex-col gap-0">
      <h2 class="text-base font-semibold">Social 5h3ll</h2>
      <p class="text-xs text-muted-foreground">Principal • 5h3ll Studio</p>
    </header>
    <div class="flex flex-col gap-1 border-t pt-2 text-sm">
      <a href="mailto:hello@ui.5h3ll.site" class="flex min-w-0 items-center gap-2 rounded-sm transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
          <span class="truncate font-mono">hello@ui.5h3ll.site</span>
      </a>
      <a href="tel:+905320001234" class="flex items-center gap-2 rounded-sm transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
          <span class="font-mono">+90 532 000 12 34</span>
      </a>
      <a href="https://ui.5h3ll.site" class="flex min-w-0 items-center gap-2 rounded-sm transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
          <span class="truncate font-mono">ui.5h3ll.site</span>
      </a>
    </div>
  </article>

  <article class="flex w-full max-w-80 flex-col gap-2.5 rounded-xl border bg-card p-3 shadow-sm">
    <div class="flex items-start gap-2.5">
      <div class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/15 text-primary">
        <span class="text-sm font-semibold">MS</span>
      </div>
      <div class="flex min-w-0 flex-1 flex-col">
        <h2 class="truncate text-sm font-semibold">Master Services Agreement</h2>
        <p class="truncate font-mono text-xs text-muted-foreground">MSA-2026-0421</p>
      </div>
    </div>
    <div class="flex flex-col gap-1 border-t pt-2 text-xs">
      <div class="flex items-center justify-between gap-2"><span class="text-muted-foreground">Party A</span><span class="truncate">5h3ll Technologies Inc.</span></div>
      <div class="flex items-center justify-between gap-2"><span class="text-muted-foreground">Party B</span><span class="truncate">Social 5h3ll Studio</span></div>
      <div class="flex items-center justify-between gap-2"><span class="text-muted-foreground">Effective</span><span>May 1, 2026</span></div>
    </div>
    <span class="inline-flex w-fit items-center gap-1.5 rounded-full bg-amber-500/15 px-2 py-0.5 text-xs font-semibold text-amber-700 dark:text-amber-300"><span class="size-1.5 rounded-full bg-amber-500"></span>Awaiting counter-signature</span>
  </article>

  <div class="flex w-full max-w-80 flex-col gap-2">
    <article class="flex gap-2 rounded-xl border bg-card p-3 shadow-sm">
      <svg class="mt-0.5 size-5 shrink-0 text-amber-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
        <div class="flex items-center gap-2">
          <h2 class="text-sm font-bold">Heat Advisory</h2>
          <span class="text-xs font-bold uppercase tracking-wider text-amber-600">Advisory</span>
        </div>
        <p class="text-xs leading-snug text-muted-foreground">Heat index up to 38C this afternoon. Stay hydrated and avoid direct sun.</p>
        <span class="text-xs text-muted-foreground">Until 9:00 PM tonight</span>
      </div>
    </article>
    <button
      type="button"
      class="btn justify-center"
      data-variant="outline"
      data-size="sm"
      onclick="window['5h3ll-ui']?.init?.('toaster'); document.getElementById('toaster')?.toast({ category: 'warning', title: 'Heat Advisory', description: 'Heat index up to 38C this afternoon. Stay hydrated and avoid direct sun.', cancel: { label: 'Dismiss' }, duration: 6000 })"
    >
      Show as toast
    </button>
  </div>

  <div class="flex w-full max-w-80 flex-col gap-2">
    <article class="overflow-hidden rounded-lg border bg-card shadow-sm">
      <header class="bg-foreground px-4 py-5 text-center text-background">
        <h2 class="text-2xl font-semibold tracking-wide">20% OFF</h2>
        <p class="text-xs uppercase tracking-[0.2em] text-background/75">Coffee &amp; Pastries</p>
      </header>
      <section class="border-t border-dashed px-4 py-3">
        <div class="flex items-center justify-between gap-3 text-sm">
          <span class="font-mono font-semibold tracking-widest">BREW20</span>
          <span class="text-muted-foreground">Expires Jun 30</span>
        </div>
      </section>
    </article>
    <button type="button" class="btn justify-center" data-variant="outline" data-size="sm" onclick="window['5h3ll-ui']?.init?.('sheet'); document.getElementById('cards-discount-sheet')?.showModal()">Open bottom sheet</button>
    <dialog id="cards-discount-sheet" class="sheet" data-side="bottom" aria-labelledby="cards-discount-sheet-title" aria-describedby="cards-discount-sheet-description">
      <article class="mx-auto w-full max-w-sm">
        <form>
          <button type="button" class="btn" data-variant="ghost" data-size="icon-sm" aria-label="Close discount sheet" onclick="this.closest('dialog')?.close()">
            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
          </button>
        </form>
        <section class="space-y-3 p-4">
          <div>
            <h2 id="cards-discount-sheet-title" class="text-base font-semibold">Coffee run reward</h2>
            <p id="cards-discount-sheet-description" class="text-sm text-muted-foreground">Show this offer at checkout from the bottom of the screen.</p>
          </div>
          <div class="overflow-hidden rounded-lg border bg-card shadow-sm">
            <header class="bg-foreground px-4 py-6 text-center text-background">
              <h3 class="text-3xl font-semibold tracking-wide">20% OFF</h3>
              <p class="text-xs uppercase tracking-[0.2em] text-background/75">Coffee &amp; Pastries</p>
            </header>
            <div class="border-t border-dashed px-4 py-4">
              <div class="flex items-center justify-between gap-3 text-sm">
                <span class="font-mono font-semibold tracking-widest">BREW20</span>
                <span class="text-muted-foreground">Expires Jun 30</span>
              </div>
            </div>
          </div>
        </section>
      </article>
    </dialog>
  </div>

  <article class="flex w-full max-w-80 flex-col gap-2 rounded-xl border bg-card p-3 shadow-sm">
    <div class="flex items-center gap-2">
      <span class="flex size-8 items-center justify-center rounded-full bg-emerald-500 text-white">
        <span class="text-xs font-semibold">8k</span>
      </span>
      <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Steps</h2>
      <span class="ms-auto text-xs text-muted-foreground">of 10,000</span>
    </div>
    <div class="flex items-baseline gap-1">
      <span class="font-mono text-3xl font-bold tabular-nums">8,420</span>
      <span class="text-xs font-semibold text-emerald-600 dark:text-emerald-400">84%</span>
    </div>
    <div class="progress" role="progressbar" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"><div style="width: 84%"></div></div>
    <div class="flex items-center justify-between text-xs text-muted-foreground">
      <span>6.4 km</span>
      <span>310 kcal</span>
    </div>
  </article>

  <article class="flex w-full max-w-80 overflow-hidden rounded-xl border bg-card shadow-md">
    <div class="flex shrink-0 flex-col items-center justify-center gap-2 border-e bg-muted/50 p-3 text-muted-foreground">
        <div class="relative flex size-14 items-center justify-center overflow-hidden rounded-md">
          <img src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?w=200&auto=format&fit=crop&q=60" alt="Elara Martin" />
        </div>
    </div>
    <div class="flex min-w-0 flex-1 flex-col justify-between gap-1 p-3">
        <div>
          <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Student ID</h2>
          <p class="text-sm font-semibold">Elara Martin</p>
          <p class="text-xs">Grade 7 • 7B</p>
          <p class="text-xs text-muted-foreground">Redwood Middle School</p>
        </div>
        <p class="font-mono text-xs text-muted-foreground">STD-24-00281</p>
    </div>
  </article>
</section>
      </div>
    </div>
  </div>
</section>
Notes

This page intentionally treats these as composable examples rather than new top-level components. Smaller card patterns are more useful when grouped into reusable examples people can adapt inside dashboards, settings pages, inboxes, and admin surfaces.