Card

Examples

Every variant rendered live from cards.css. The default surface plus the watermark and visual-header variants.

<div class="card">
  <div class="card__body">…</div>
</div>

<div class="card card--watermark">
  <i class="ph ph-chart-line card__watermark" aria-hidden="true"></i>
  <div class="card__body">…</div>
</div>

<div class="card card--visual">
  <div class="card__visual"><i class="ph ph-flask" aria-hidden="true"></i></div>
  <div class="card__body">…</div>
</div>

Usage

Cards carry the warmth of the brand against a white page.

• Cards are cream on a white page, the surface contrast is what makes them read as cards.
• Never put padding directly on .card; use .card__body so the stroke and radius stay clean.
• The watermark icon is decorative, always mark it aria-hidden="true".
• One variant per card. Don't combine --watermark and --visual on the same surface.

States

Cards have one motion state. On hover the background shifts from --color-surface-cream to --color-surface-cream-hover, the card lifts by translateY(-2px), and --shadow-card renders beneath it. Cards are interactive only when they wrap a link, a static card still responds to hover, but should not imply an action it can't perform.

Code

Link the stylesheet once, then compose with the element and variant classes.

<link rel="stylesheet" href="/_shared/components/cards.css">

<div class="card">
  <div class="card__body">…</div>
</div>

<div class="card card--watermark">
  <i class="ph ph-chart-line card__watermark" aria-hidden="true"></i>
  <div class="card__body">…</div>
</div>

<div class="card card--visual">
  <div class="card__visual"><i class="ph ph-flask" aria-hidden="true"></i></div>
  <div class="card__body">…</div>
</div>