Content Card

Structured card layout pattern with header, body, and optional footer. For card specs, see Elevate Lookbook and DESIGN.md.

Basic Card

Title + content. Border defines edge (no shadow).

Card Title

Card description with supporting text that explains what this card is about. Body content can contain any components. 

<div class="elv-content-card elv-content-card--bordered">
  <div class="elv-content-card__header">
    <div class="elv-content-card__header-content">
      <h3 class="elv-content-card__title">Card Title</h3>
    </div>
  </div>
  <div class="elv-content-card__body">
    <p class="elv-text-sm elv-text-default">Content...</p>
  </div>
</div>

With Subtitle

Title + subtitle for additional context.

Account Settings

Manage your profile and preferences

Update your account information, notification settings, and privacy preferences. 

<div class="elv-content-card__header">
  <div class="elv-content-card__header-content">
    <h3 class="elv-content-card__title">Account Settings</h3>
    <p class="elv-content-card__subtitle">Manage your profile</p>
  </div>
</div>

With Header Actions

Title + action buttons (close, edit, etc.).

Notifications

You have 3 unread notifications. Check your activity feed for updates. 

<div class="elv-content-card__header">
  <div class="elv-content-card__header-content">
    <h3 class="elv-content-card__title">Notifications</h3>
  </div>
  <div class="elv-content-card__actions">
    <button class="elv-content-card__action-button">...</button>
  </div>
</div>

With Footer

Content + action buttons at bottom.

Confirm Action

Are you sure you want to proceed? This action cannot be undone. 

<div class="elv-content-card elv-content-card--bordered">
  <div class="elv-content-card__header">...</div>
  <div class="elv-content-card__body">...</div>
  <div class="elv-content-card__footer">
    <button class="btn btn--tertiary btn--md">Cancel</button>
    <button class="btn btn--primary btn--md">Confirm</button>
  </div>
</div>

Elevated (Shadow)

Floating card with subtle shadow (10% opacity).

Floating Card

Use elevated cards for modals, popovers, or elements that need visual lift. No border when elevated. 

<div class="elv-content-card elv-content-card--elevated">
  <!-- No border when using --elevated -->
  <div class="elv-content-card__header">...</div>
  <div class="elv-content-card__body">...</div>
</div>

Large Radius

16px border radius for prominent cards.

Large Card

Use larger radius (16px) for hero cards or prominent content. 

<div class="elv-content-card elv-content-card--bordered elv-content-card--lg">
  <div class="elv-content-card__header">...</div>
  <div class="elv-content-card__body">...</div>
</div>

Footer Variants

Footer with different alignments.

Right-aligned Footer

Actions right-aligned.

Center-aligned Footer

Single action centered.

<!-- Right-aligned -->
<div class="elv-content-card__footer elv-content-card__footer--end">
  <button class="btn btn--primary btn--sm">Get started</button>
</div>

<!-- Center-aligned -->
<div class="elv-content-card__footer elv-content-card__footer--center">
  <button class="btn btn--primary btn--md">Continue</button>
</div>

Usage Notes