Cards

Card components for grouping related content and media.

Basic Card

Card Title & content with action

Another Card example

<div class="ms-card">
  <h3>Title</h3>
  <p>Card content</p>
</div>

Variants

Default

Dark

Glass

Interactive elevated card with header and footer.

<div class="ms-card ms-card--dark">...</div>
<div class="ms-card ms-card--glass">...</div>

Hero Card

Hero title

Short hero content.

<div class="ms-card ms-card-hero">
  <div class="ms-card-hero__image-wrapper"><img src="..."></div>
  <div class="ms-card-hero__content">...</div>
</div>

Stat Cards

12.4k

Users

$24k

Revenue

Open issues

<div class="ms-card ms-card-stat">
  <div class="ms-card-stat__value">12.4k</div>
  <div class="ms-card-stat__label">Users</div>
</div>

Available Classes

ms-card, ms-card--dark, ms-card--glass, ms-card-hero, ms-card-stat