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>

Variations

Every shape below came out of building the Layouts gallery, where the same handful of card forms kept being improvised page by page. Each is a shape a real page asks for rather than a decorative option, and they combine.

Emphasis

.ms-card--flat

Border instead of shadow. For cards that group content without competing with it — most cards on a dense page.

.ms-card--outline

Dashed and transparent. Reads as a placeholder or a drop target rather than as content.

.ms-card--elevated

Lifted. Use sparingly — if everything is raised, nothing is.

Status accents

A stripe down the leading edge. Pair it with a badge: colour on its own is not a signal every reader can use.

Info

.ms-card--accent

Passed

.ms-card--accent-success

Due

.ms-card--accent-warning

Failed

.ms-card--accent-danger

With media

.ms-card--media

Media flush to the card edge. Without it, every image card has to cancel the card padding by hand.

.ms-card--horizontal

Media beside the text: a search result, a message row, a line in a cart. Stacks below 600px, where the thumbnail column stops helping.

Density

.ms-card--compact

Tight, for dense grids.

.ms-card--roomy

Generous, for marketing.

.ms-card--flush	no padding
so a table	reaches the edge

Behaviour

.ms-card--interactive

The whole card is the target. Hover and focus land on the card, not on the text inside it.

Recommended .ms-card--featured

The one plan being recommended, with .ms-card__ribbon.

.ms-card--fill

Equal heights across a grid row.

Feature card

bolt .ms-card--feature

Centred, with an icon block, for a three-across feature row.

Markup

<div class="ms-card ms-card--media ms-card--fill">
    <span class="ms-thumb ms-card__media"></span>
    <div class="ms-card__body">
        <h3 class="ms-card__title">Title</h3>
        <p>Body copy.</p>
    </div>
    <div class="ms-card__footer"><a class="ms-btn ms-btn--sm">Open</a></div>
</div>

Available Classes

ms-card, ms-card--flat, ms-card--outline, ms-card--elevated, ms-card--media, ms-card--horizontal, ms-card--accent, ms-card--accent-success, ms-card--accent-warning, ms-card--accent-danger, ms-card--compact, ms-card--roomy, ms-card--flush, ms-card--fill, ms-card--interactive, ms-card--featured, ms-card--feature, ms-card-hero, ms-card-stat, ms-card__media, ms-card__ribbon, ms-card__icon-block, ms-card__header, ms-card__body, ms-card__footer