Cards

Container components for grouping related content. The building block of every Monarch interface.

Base Card

Standard Card

Base Card

Surface background, subtle border, 12px radius. Lifts slightly on hover with a border color change and shadow.

HTML

<div class="monarch-card">
  <div class="monarch-card__body">Content</div>
</div>

Card with Header

Header Card

Cards with headers include a border separator and an action link.

HTML

<div class="monarch-card">
  <div class="monarch-card__header">
    <span class="monarch-card__header-title">Agent Activity</span>
    <button class="monarch-card__header-action">View All →</button>
  </div>
  <div class="monarch-card__body">Content</div>
</div>

Elevated Card

Elevated

Elevated Card

One step up from base — elevated background with medium border and box shadow.

HTML

<div class="monarch-card-elevated" style="padding: 24px;">Content</div>

Gradient Border Card

Gradient Border

Featured

Gradient border using background-clip. Glows on hover. Use for featured content and premium callouts.

HTML

<div class="monarch-card-gradient" style="padding: 24px;">Featured content</div>

Glass Card

Glassmorphism

Glass Card

Backdrop blur with semi-transparent background. Use for overlays, modals, and floating elements.

HTML

<div class="monarch-card-glass" style="padding: 24px;">Glass content</div>

Usage Guidelines

• Base cards for standard content grouping — lists, details, form sections

• Elevated cards for active/focused states, interactive elements

• Gradient border for featured content, premium callouts, highlighted items

• Glass cards sparingly — modals, command palettes, floating menus

• Hover effect: 1px lift + border color change + shadow — subtle, not dramatic