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.
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.
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-gridor successivedecisionslides. - No verdict. The blockquote is mandatory. Without it the slide collapses to a comparison without a call — use
compare-prosefor 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.
Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
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 │
└─────────────────────────────────────────┘