Lattice

Components Comparison

split-compare

Comparison Split Structure

Two options + verdict — dark frame on the left, 2-column option grid + a recommendation card on the right.

Open in Playground

Use when a decision frames a binary choice and the recommendation must be unambiguous. Second top-level list item is always the preferred option (gets the accent badge). The verdict blockquote becomes a recommendation card with a corner tag, pinned across the bottom.

tradeoffrecommendationcontrast

When to use

  • Binary decision with a recommendation. The slide must close the question with one chosen path. Use when the audience needs both the trade-off and the verdict on one slide, not on two.
  • Comparable facts per option. Each side carries 2–4 short bullets — the same kind of fact across both. Lopsided facts break the visual symmetry.
  • Verdict in one sentence. The trailing blockquote is the recommendation distilled to a single line. Anything longer belongs in spoken commentary, not the recommendation card.

When not to use

  • Three or more options. split-compare is strictly two — first card is the alternative, second card is the preferred. For three options, use verdict-grid or successive decision slides.
  • No verdict. The blockquote is mandatory. Without it the slide collapses to a comparison without a call — use compare-prose for that case.
  • Preferred on the left. Layout convention pins the preferred option to the second (right) card. Putting the recommendation first breaks the reading flow and the accent badge lands on the wrong card.

Authoring

<!-- _class: split-compare -->

`Decision Required`

## Headline that frames the choice.

One-sentence context paragraph explaining the stakes.

- Alternative option
  - First fact about the alternative
  - Second fact about the alternative
- Preferred option
  - First fact about the preferred path
  - Second fact about the preferred path

> The recommendation in one decisive sentence.

Slots

SlotSelectorRequiredDescription
frame p:first-of-type > code no Optional inline-code frame label above the heading (e.g. 'Decision Required').
heading h2 yes Decision framing in the dark left panel.
context p yes One-sentence context paragraph under the heading.
options ul > li yes Exactly two top-level items. First is the alternative; second is the preferred option.
verdict blockquote yes The recommendation — one short sentence in a blockquote.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  ┌────────────┐  ┌──────────────────┐   │
│  │ OPTION     │  │ Choice A         │   │
│  │ A vs B     │  └──────────────────┘   │
│  │            │  ┌──────────────────┐   │
│  │ verdict    │  │ Choice B         │   │
│  └────────────┘  └──────────────────┘   │
│  footer                           1/19  │
└─────────────────────────────────────────┘