Anatomy
Card with all three slots
Body content sits between hairlines. Use this slot for paragraphs, forms, lists, charts, or nested tables. Padding scales with the card size variant.
SuperCat Design System · Primitives · iPad-grade
.kcA surface for grouping content. Slots own their padding, so cards embed edge-to-edge tables and lists without fighting them. Every card lifts a hair on hover with a soft shadow — interactive cards take a slightly stronger shadow to read as clickable. The dashboard tiles, summary panels, and activity feeds you saw in the App screenshots all compose from this primitive.
Three slots, each with its own padding. Hairline dividers appear
automatically between adjacent slots. Use only the slots you need —
a card with just .kc-body is fully valid.
Body content sits between hairlines. Use this slot for paragraphs, forms, lists, charts, or nested tables. Padding scales with the card size variant.
Body-only card — no head, no foot. Useful for callouts, single- paragraph notices, or content where the title is implicit from the surrounding context.
Three padding scales: 16, 24 (default), and 32 px. Radius scales
with the size — sm uses --radius-md, default
uses --radius-lg, lg uses
--radius-xl.
16 px padding · radius-md. For toolbars, sidebar groups, dense dashboards.
24 px padding · radius-lg. The everyday card.
32 px padding · radius-xl. For feature panels and hero sections.
Four orthogonal surface treatments. .kc alone is
the default (white card on cream paper). .kc-feature
drops the border in favor of a paper-2 fill. .kc-inverse
is ink-dark and theme-agnostic. .kc-dashed is for
empty slots and "drop here" affordances.
White card on cream paper, hairline border. Everyday content.
Paper-2 fill, no border. Use sparingly — the tint IS the chrome.
Ink-dark surface, cream text. Theme-agnostic — same in light and dark.
Empty slot. Drop a file, add a widget,
or use as a "no content yet" placeholder.
Direct replacement for the four stat tiles on the App's Dashboard
(Total products / eCat orders / Total customers / Active users).
Big tabular-numeral display, mono caps eyebrow, optional icon and
trend chip. Use .kc-grid.kc-grid-4 for the
classic four-up layout.
Each tile is its own CSS container (container-type: inline-size),
so the value's font scales with the tile's actual rendered width, not the viewport.
Drop the same metric into a 4-up grid, then a 2-up, then a 1-up — the number
shrinks or grows on its own. Long numbers in narrow tiles compress automatically
instead of overflowing.
Pathological inputs — say a 10-digit number in a 4-up grid — will hit the
clamp floor (22 px) and may still feel cramped. For values that long, format
to "1.3M" or use a wider grid (.kc-grid-2).
The card never breaks: parent .kc has
overflow: hidden.
A card with .kc-body-flush embeds a table edge
to edge. The card supplies the title and footer; the table runs the
data. Direct replacement for "Best Selling Products" and "Statistics"
panels on the App's Dashboard.
| Product | SKU | Vendor | Units | Revenue |
|---|---|---|---|---|
| Mantle dining table | MN-2210 | Caldera Mills | 142 | $150,520.00 |
| Ridgeline armchair | RD-1042 | Caldera Mills | 88 | $109,120.00 |
| Cane side table | CS-7732 | Wovenway Co. | 412 | $24,720.00 |
| Field bench | FB-3304 | Field & Frame | 298 | $17,880.00 |
| Linen runner · oat | LR-0418 | Atlas Linens | 181 | $362.00 |
For non-tabular vertical data: avatar + name/meta + trailing value. Lighter than a table, denser than free prose. Direct replacement for "Most Active Users" on the App's Dashboard.
Add .kc-interactive for hoverable cards.
On hover the card lifts translateY(-1px) and
a 3 px crimson left edge fades in — never a hard border. Use on
<a> for links or <button>
for actions; both are keyboard-focusable with a proper crimson ring.
Dashed cards for empty states and "drop a widget here" affordances.
No fill, dashed hairline. Pair with a clear empty-state body — see
the table primitive's .kdt-empty-board for
a richer empty composition.
Drop a metric tile, chart, or recent-activity feed into this slot.
Next · .kdt table · .kb button · .kf forms · App screens (next)