Cards

Card components for grouping related content and media.

Layout convention (required)

Follow these rules on every McGowanStyle page. They keep card spacing uniform and stop ad-hoc margins from creeping in.

Every card lives inside a grid. Wrap each ms-card in a grid column — <div class="u-grid u-grid-cols-12"><div class="u-col-12"><div class="ms-card">…</div></div></div>. Never place a bare ms-card outside a u-grid.
Multi-column rows share one grid. Put several u-col-N / u-col-md-N cells inside a single u-grid (for example, stat tiles in u-col-3). Stacked full-width cards are separate u-grid > u-col-12 > ms-card blocks — one grid per row.
The grid owns the spacing. The u-grid utility provides the gap and a margin-bottom — that is the required ~10px spacing beneath every card. Do not add ad-hoc card margins.

<!-- One full-width card: grid > col > card -->
<div class="u-grid u-grid-cols-12">
  <div class="u-col-12">
    <div class="ms-card">…</div>
  </div>
</div>

<!-- Multi-column row: several cells in ONE grid -->
<div class="u-grid u-grid-cols-12">
  <div class="u-col-3"><div class="ms-card ms-card-stat">…</div></div>
  <div class="u-col-3"><div class="ms-card ms-card-stat">…</div></div>
  <div class="u-col-3"><div class="ms-card ms-card-stat">…</div></div>
  <div class="u-col-3"><div class="ms-card ms-card-stat">…</div></div>
</div>

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