> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Specimen Card

Index-card for libraries and galleries

- Category: Components
- Tags: card gallery grid specimen

## Usage

The workhorse card for any library/gallery grid: index number, category label, display title, clamped description, swatch strip, markdown chip.

## Rules

- Grid it inside `grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-px bg-base-content/10` — the 1px gaps form hairline dividers.
- Hover: background lifts to base-200; add a bottom accent bar via `::after` scaleX transition if the design system supports it.
- Swatches are pure `<div>`s with hex backgrounds — no images needed.
- The `.md` chip links to the item's `.md` URL; make it a real anchor when used on PageWeave.

## Variations

- **Font specimen**: replace swatches with two stacked lines set in the item's fonts.
- **Numbered rail**: same card in a horizontal scroll container with `scroll-snap`.

## HTML source

```html
<a href="#" class="group block bg-base-100 border border-base-content/10 hover:bg-base-200 transition-colors">
  <div class="p-6 flex flex-col gap-3">
    <div class="flex justify-between items-baseline font-mono text-[0.68rem] uppercase tracking-[0.14em] text-base-content/50">
      <span>01</span><span>STYLE</span>
    </div>
    <h3 class="text-xl font-medium tracking-tight" style="font-family:'Fraunces',serif">Brutalist</h3>
    <p class="text-sm text-base-content/70 leading-relaxed line-clamp-3">
      Raw typography, exposed structure, high contrast. Honesty of material over decoration.
    </p>
    <div class="mt-2 flex items-center justify-between">
      <div class="flex">
        <div class="w-5 h-5 bg-[#0f0e0c] border border-black/25"></div>
        <div class="w-5 h-5 bg-[#f2f0ea] border border-black/25 -ml-px"></div>
        <div class="w-5 h-5 bg-[#ff3e00] border border-black/25 -ml-px"></div>
        <div class="w-5 h-5 bg-[#1d4ed8] border border-black/25 -ml-px"></div>
      </div>
      <span class="font-mono text-[0.64rem] text-base-content/50 border border-base-content/15 px-1.5 py-0.5">.md</span>
    </div>
  </div>
</a>
```