Card

Variants

default (subtle layered shadow), elevated (stronger elevation), and inset (hairline inner border). These change only the surface treatment — background, radius, and divider all read from tokens.

Playground

<Card
  eyebrow={<YourEyebrow />}
  media={<YourMedia />}
  backdrop={<YourBackdrop />}
>Structural inconsistencies surface early, allowing deliberate correction.</Card>

title

body

variant

titleTone

eyebrow

↳ type

media

↳ position

actions

backdrop

Layout recipes

The same Card composes into different looks through its slots — an icon eyebrow with a decorative backdrop, a numbered eyebrow, or a horizontal split with media and an action. The structure is identical in every theme; switching the theme only swaps the color, font, and shadow tokens.

Slots

Every slot accepts any ReactNode — the component never assumes what goes inside, so an eyebrow can be an icon chip, a label, or a number with no component-level branching.

import { Card } from '@cajon-ui/react';

// Feature card: icon eyebrow, accent title, decorative backdrop
<Card titleTone="accent" eyebrow={<YourIconChip />} title="Drift Becomes Detectable" backdrop={<YourBackdrop />}>
  Structural inconsistencies surface early.
</Card>

// Numbered card
<Card titleTone="accent" eyebrow="01" title="Proprietary Data Engineering">
  Specialized in navigating legacy complexity.
</Card>

// Split card: content beside media, with a CTA
<Card
  mediaPosition="right"
  eyebrow={<Badge outline>Structural Conviction</Badge>}
  title="Build the Foundation"
  media={<YourIllustration />}
  actions={<Button>Explore Foundations</Button>}
>
  Modernize your platform so speed doesn’t create fragility.
</Card>

Props

Prop	Type	Default	Notes
`variant`	`default \| inset \| elevated`	`default`	Surface treatment
`mediaPosition`	`top \| right \| bottom \| left`	`bottom`	Where the `media` slot sits; ignored without `media`
`header`	`ReactNode`	—	Full-bleed title row above a divider
`eyebrow`	`ReactNode`	—	Slot above the title (icon chip, label, number)
`title`	`ReactNode`	—	Display title above the body
`titleTone`	`default \| accent`	`default`	`accent` colors the title with the theme accent token
`actions`	`ReactNode`	—	Slot below the body — typically a CTA row
`media`	`ReactNode`	—	Media panel on a recessed surface, placed per `mediaPosition`
`backdrop`	`ReactNode`	—	Full-bleed decorative layer behind the content (`aria-hidden`)
`disableBodyPadding`	`boolean`	`false`	For full-bleed content

All other native <div> attributes pass through; the component forwards its ref.

Theming

Card structure is driven by global --cajon-card-* tokens that stay constant across themes — only color, font, and shadow tokens change when the theme switches. Retune the card standard for the whole design system by overriding these once (they are not meant to be set per theme):

Token	Default	Controls
`--cajon-card-radius`	`--cajon-radius-md`	Corner radius
`--cajon-card-padding`	`--cajon-space-6`	Content padding
`--cajon-card-gap`	`--cajon-space-4`	Vertical rhythm between eyebrow / title / body / actions
`--cajon-card-title-size`	`--cajon-type-h5-size`	Title font size
`--cajon-card-media-min`	`240px`	Media panel basis in horizontal layout