Capability grid

Example

A two-column grid of larger cards, each a monospace category tag, a heading, a one-line description, and an oversized watermark icon faded behind the text.

Composition

A capability grid repeats one larger card type, the watermark variant, each led by a monospace category tag:

• Card, the watermark variant .card.card--watermark tile, with an oversized .card__watermark icon faded behind the text at --icon-watermark-opacity.
• Category tag, the monospace label above the heading, set in var(--font-mono), uppercase, that names the capability's category.

Usage

The capability grid presents platform capabilities as a two-column set of larger cards, each anchored by a watermark icon and led by a category tag.

• The monospace tag names the category in one word, uppercase, keep it short and parallel across cards.
• One watermark icon per card, never more than one oversized mark behind the text.
• The icon echoes the category, faded behind the text so it anchors without competing with it.
• Use 2 (or 4) cards in a two-column grid so the layout stays balanced across rows.

Code

Link cards.css, then repeat the watermark card, a category tag, a heading, a description, and one watermark icon.

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

<div class="card card--watermark">
  <i class="ph ph-flask card__watermark" aria-hidden="true"></i>
  <div class="card__body">
    <span style="font-family:var(--font-mono)">BUILD</span>
    <h3>Experiments</h3>
    <p>A/B, MVT, and full-stack tests from one platform.</p>
  </div>
</div>