cards-grid — Lattice component
Lattice

cards-grid

InventoryGridStructure

2–4 parallel items, similar weight, scannable in a grid.

Open in Playground
Variant

Use when the audience needs to compare or scan a small set of options at a glance. Avoid for more than 4 items — split into multiple slides. For ordered/numbered steps, use list-steps instead.

overviewshowcasesummary

When to use

  • Parallel items. Four cards or fewer, each item gets equal weight in the layout. Audience compares them at a glance.
  • Scannable at a glance. The audience absorbs the whole set in one look — no scrolling, no eye-leaping between rows.
  • Equal information density. Each card carries roughly the same text length. Uneven density makes the grid feel unbalanced.
  • Order is decorative. When sequence carries meaning, use list-steps or list-criteria instead. cards-grid is for parallel options.

When not to use

  • More than 4 items. Split into multiple slides instead. The grid loses scannability past 4 cards.
  • Order carries meaning. Use list-steps or list-criteria. cards-grid is for parallel options, not sequences.
  • Lopsided density. Equalize the prose when one card has three sentences and the rest have one. Otherwise change layout.
  • Inline-code-only body. A body bullet containing only code gets promoted to an eyebrow label. Mix it with surrounding prose.

Common mistakes

  • Writing the card as one inline line (- **Title.** body) instead of a nested bullet. cards-grid requires the nested - Title / - body format (HARD RULE #5, lint-enforced) — the inline form fails the deck-authoring lint, and the body inherits the parent li's bold weight instead of rendering at normal weight.
  • Adding a numbered class to the slide, expecting it to turn on corner numbers. There is no numbered CSS class — the numbering comes purely from authoring the cards as an ordered list (1.) instead of a bullet list (-); the numbered entry in variants documents that authoring choice, not a class to type.

Authoring

<!-- _class: cards-grid -->

## Slide heading.

- First card title
  - Body text for the first card, one sentence.
- Second card title
  - Body text for the second card, one sentence.
- Third card title
  - Body text for the third card, one sentence.
- Fourth card title
  - Body text for the fourth card, one sentence.

Slots

SlotSelectorRequiredDescription
titleh2yesSlide heading.
cardsul > liyesEach list item becomes one card. Authoring contract: a top-level bullet is the card title (renders bold by default); an indented bullet underneath carries the body text (renders normal weight via the nested-list rule).
insightblockquotenoOptional key-insight panel above the cards.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│                  LABEL                  │
│               Grid Title                │
│                                         │
│  ┌──────────────┐     ┌──────────────┐  │
│  │ Card Title 1 │     │ Card Title 2 │  │
│  │ content      │     │ content      │  │
│  └──────────────┘     └──────────────┘  │
│  ┌──────────────┐     ┌──────────────┐  │
│  │ Card Title 3 │     │ Card Title 4 │  │
│  │ content      │     │ content      │  │
│  └──────────────┘     └──────────────┘  │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Variant decision rule

  • default (no modifier) — Two cards, or the default column count already fits — no need to force a specific column count.
  • three — Exactly three parallel items need equal width — widens the grid to three columns.
  • four — Four parallel items, often a 2×2 quadrant read where card position itself carries meaning.
  • numbered — The cards have an implicit rank or step order worth surfacing as corner numbers — author with 1. instead of -.

Variants

four — Four columns

Four columns; pair with compact.

<!-- _class: cards-grid four compact -->

## four locks a two-by-two, compact tightens it.

- Quadrant read.
  - Four cells scan as a loop.
- Compact pairing.
  - Padding shrinks so labels stay whole.
- Named corners.
  - Position carries meaning; place cards deliberately.
- Still four.
  - The ceiling does not move.
Explore in Playground

three — Three columns

Three equal columns.

<!-- _class: cards-grid three -->

## three widens the grid to three columns.

- Wider cards.
  - Each card earns a third of the row.
- Same budget.
  - Bodies stay one clause, titles stay parallel.
- Sweet spot.
  - Three peers is the count this grid loves.
Explore in Playground

numbered — Numbered cards

Ordered source stamps corner tags.

<!-- _class: cards-grid -->

## An ordered list numbers the cards.

1. Numbers appear
   - Markdown's ordered list turns cards into steps.
2. Sequence reads
   - The grid now implies order, so mean it.
3. Budget holds
   - Same one-clause bodies as the unnumbered grid.
Explore in Playground

Related