Components / Specimen Card
Live preview — rendered in this site's theme
Specimen Card
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 Copy-paste source
<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>