Cards group related content — a client summary, a metric block, a quick action. They’re surfaces, not interactive elements by default.

Usage

<div class="of-card">
  <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px;">
    <strong>Meridian Advisory</strong>
    <span class="of-badge of-badge--green">Active</span>
  </div>
  <p style="font-size:14px; color:var(--of-fg-muted); margin:0;">Strategic ops · started Jan 2025</p>
</div>

Examples

Brand elevated

Use of-card--brand-elevated for a single featured card in a section. Limit it to one per view so hierarchy stays clear.

Guidelines

Cards sit on --of-bg-elevated. Nest them inside a --of-bg-base page background for visible lift. Don’t nest cards inside cards — use internal sections within a single card instead.

Radius is lg (14px). Shadow is sm by default.