Checklist Split
A split feature section with a header and grouped checklist beside a tall app window mockup with stats, task rows, and status chips.
A split feature section with a header and grouped checklist beside a tall app window mockup with stats, task rows, and status chips.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Checklist Split pairs a claim with the evidence for it. The left column stacks the section headline and lede over a grouped feature checklist: two small uppercase group labels, each introducing four short check rows with a soft circled check mark. The right column is one tall app window mockup with browser chrome, a three cell stat header, a filter row, and a task list where each row carries an assignee, a due day, and a status chip.
The two sides are independent. The checklist groups are plain arrays, so you can rename the groups, reorder rows, or add a third group without touching the mockup. The window is plain markup built from theme tokens, and its task rows stretch to match the height of the column beside them, so the split stays balanced as you edit either side.
Reach for this block when a feature list alone feels thin and a screenshot alone feels vague. On a landing page for a team task manager, the checklist names the capabilities while the window shows them at work in the same glance, which lands harder than either half on its own. It suits the middle of the page, after the hero sets the promise and before social proof and pricing close the argument.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is a capability checklist beside the product that delivers it. A few other directions:
Tip: keep every check row to a single line at desktop widths. The rows read as a rhythm, and one wrapping item breaks the beat more than it adds information.