verdict-grid — Lattice component
Lattice

verdict-grid

ComparisonGridStructure

Options scored against criteria as a verdict matrix.

Open in Playground

Use to evaluate 2–4 options against the same set of criteria, with pass/partial/fail badges. Each card represents one option; badges per criterion.

scorecardrankingprioritizeassessment

When to use

  • Two to four options. Each card is one option; the grid keeps two cards per row. Past four options the cards crowd and the criteria badges lose legibility.
  • Shared criteria across cards. Every option is scored on the same set of criteria, in the same order. Drifting criteria between cards defeats the at-a-glance scan the layout exists for.
  • Two-word badges. Each criterion is a state marker ([x] / [-] / [ ] / [/], shared with checklist and obligation-matrix) plus a badge label of at most two words — Residency, Self-serve, SOC 2. The badge is chrome that must scan in a glance.
  • A rationale line is required. Every option ends with one final inner bullet that carries NO marker — a short prose verdict for that option. It is the body that fills the card, and the last option renders as the focal, recommended verdict.

When not to use

  • Exactly two options. Two options with shared criteria belong in compare-prose or split-compare. verdict-grid earns its layout at 3+ options.
  • No rationale line. Every option must end with a marker-less prose line — the verdict for that card. Omit it and the card renders empty below the badges, and the focal last card has nothing to recommend. The rationale is required, not optional.
  • Badge longer than two words. The text after the marker is a badge, not a sentence — two words at most (Residency, Self-serve). A sentence on a badge line breaks the row scan; prose belongs only on the final rationale line.
  • Cards with different criteria. When each option needs its own criteria list, the comparison fails — use cards-stack so each card has full prose breathing room instead.

Common mistakes

  • Using [ ] (empty) to mean "not applicable" or a soft neutral, rather than an explicit fail. In verdict-grid specifically (and pricing), [ ] reads as a hard fail/alarm state, not neutral — for a partial reading use [-]; for a muted, not-alarming 'not included' use [/]. This is verdict-grid's own scoring, not the shared state-marker vocabulary's default: the same [ ] reads as a neutral 'not yet' in checklist, obligation-matrix, and roadmap. Picking the wrong marker here changes the badge's color semantics, not just its shape.
  • Putting the recommended option first instead of last. The focal-verdict treatment is applied to the LAST option card, not whichever one the author considers the pick — order the option you want to recommend so it's written last.

Authoring

<!-- _class: verdict-grid -->

## Which option meets the criteria.

- **First option.**
  - [x] First badge
  - [-] Second badge
  - [ ] Third badge
  - One-line rationale giving the verdict for this option.
- **Second option.**
  - [x] First badge
  - [x] Second badge
  - [-] Third badge
  - One-line rationale giving the verdict for this option.
- **Third option.**
  - [x] First badge
  - [x] Second badge
  - [x] Third badge
  - One-line rationale; the last option is the focal verdict. Recommended.

Slots

SlotSelectorRequiredDescription
titleh2yesSlide heading naming the choice.
optionsul > liyesOne outer li per option, lead with Option name.. Then one inner li per criterion, each led by a state marker ([x]/[-]/[ ]/[/]) followed by a badge label of AT MOST TWO WORDS. Criteria are shared across every option, in the same order. The last option renders as the focal verdict.
rationaleul > li > ul > li:last-childyesREQUIRED. The final inner li of every option carries NO state marker — one short prose line giving the verdict for that option. This content line is what fills the card; omit it and the card renders empty below the badges.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  Verdict grid heading.                  │
│                                         │
│  ┌──────────────┐     ┌──────────────┐  │
│  │ Option A [x] │     │ Option B [-] │  │
│  │ rationale    │     │ rationale    │  │
│  └──────────────┘     └──────────────┘  │
│  ┌──────────────┐     ┌──────────────┐  │
│  │ Option C [ ] │     │ Option D [x] │  │
│  └──────────────┘     └──────────────┘  │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Related