Card — SLAB

Tones

tone prop — surface fill

white (default)

Standard white surface. Use for most content.

paper

Warm paper tone. Good for secondary surfaces.

lime

Loud accent surface. Use sparingly.

yellow

Warning / highlight surface.

dark

Inverted surface. High contrast.

Shadow variants

shadow prop — hard offset depth (zero blur)

none

pink

violet

lime

Header & flush

header prop · flush prop (removes body padding)

Campaign status

With header prop. Lime bar, mono uppercase label.

Analytics

Custom header color via the header node.

flush removes body padding for edge-to-edge content.

Do / Don't

✓ Do

Stats

Use the header prop for labelled cards. Keeps typography consistent.

✕ Don't

Don't use blurred shadows or remove the ink border. Both are signature SLAB traits.

Props

Prop	Type	Default	Description
tone	"white"\|"paper"\|"lime"\|"yellow"\|"dark"	"white"	Surface fill color.
shadow	"none"\|"sm"\|"md"\|"lg"\|"pink"\|"violet"\|"lime"	"md"	Hard offset shadow depth and color.
flush	boolean	false	Removes inner body padding for edge-to-edge content (images, tables).
header	ReactNode	null	Optional mono uppercase header bar with lime background.
children	ReactNode	—	Card body content.
style	CSSProperties	{}	Merged onto root element. Use for width, margin overrides.

Usage

import { Card } from "components/core/Card";

// Basic
<Card>Content here</Card>

// With header + shadow variant
<Card header="Campaign stats" shadow="lg">
  <p>$28,900 revenue</p>
</Card>

// Flush + dark tone
<Card tone="dark" flush shadow="violet">
  <img src="cover.jpg" />
</Card>