Showcase grid

A grid of cards for cases, use-cases, or quality points, a scannable set of equal-weight items under one heading.

Example

A centered eyebrow and heading above a three-column grid of equal-weight cards, each an icon, title, and one-line description.

Use cases

Built for every team

Product

Ship features behind flags and ramp with confidence.

Marketing

Test landing pages and messaging without dev cycles.

Engineering

Server-side experiments with the same SDK.

Composition

A showcase grid pairs a centered eyebrow-led header with a row of equal-weight cards:

Eyebrow, the .kicker label above the heading that names the set.
Card, the repeated .card tile that holds each icon, title, and description.

Usage

The showcase grid lays out a scannable set of equal-weight items (cases, use-cases, or quality points) under one heading.

Use 3 (or 2, 4, 6) equal-weight cards so the grid stays balanced across rows.
Keep titles parallel in form, same part of speech, same length, same level.
One icon, one title, and one-line description per card, nothing more.
The grid collapses to a single column on mobile, write each card to read on its own.

Code

Link cards.css, then lay the cards out in a grid wrapper, repeat the same card markup for each item.

<link rel="stylesheet" href="/_shared/components/cards.css">

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px">
  <div class="card">
    <div class="card__body">
      <i class="ph ph-flask" aria-hidden="true"></i>
      <h3>Product</h3>
      <p>Ship features behind flags and ramp with confidence.</p>
    </div>
  </div>
</div>