Patternbook

Features — Two grouped capability checklists

Two labelled capability lists sit beneath one introduction with a shared action beneath them.

1440 × 900

Open in new tab

Pattern notes

When to use
Use to separate capabilities from support or access. Pick an icon grid for individually emphasized benefits. Variations: group by audience, show four checks per group, or replace the closing action with an assurance note.
Hierarchy
The section heading introduces two groups, each with a title, short context and three check-mark rows. Keep the heading under 8 words, each context under 15 and each capability under 10.
Responsive
Groups stack below 768px. The shared closing panel wraps its note and action while checklists stay vertical. Section type changes from 30px to 36px at 640px.
Layout
A max-w-6xl container uses 24px side padding and 64px to 96px vertical padding. Two capability groups appear 40px below the introduction and form equal columns from 768px with a 40px gap. Each begins with a top border and 24px padding; a shared action panel follows.
States
Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.
Desktop wireframe
┌──────────────────────────────────────────────────────────┐
│Eyebrow / Heading / Introduction                          │
│                                                          │
│Core capabilities                Included support         │
│Check Main benefit               Check Guidance           │
│Check Workflow                   Check Resources          │
│Check Reliability                Check Help               │
│                                                          │
│Closing note                              [Explore]       │
└──────────────────────────────────────────────────────────┘

More in Features

View all Features patterns