About this block

Checklist With Progress photographs onboarding mid flight. The copy claims the card is the actual setup list and does the arithmetic, three boxes tick themselves, the rest take twenty minutes, while the card shows a 60% meter computed from six tasks in three visible states, struck done rows, the active row tinted, and the waiting pair.

The tasks are one array with states, and the meter percent computes from the done count so the two cannot disagree. The mid flight state is the persuasion, an empty checklist is a chore and a full one is a brag, 60% is an invitation.

When to use

Reach for this block on product pages where setup fear is the blocker, it pairs with progress-bar-steps as the close up to that block wide shot, and with the CTA group with-setup-progress which reuses the motif at conversion time. One of the three per page is plenty.

A natural flow around it on a Marketing Pro page:

Before

• Heroes whose promises this checklist schedules

After

• Tour blocks showing the screens behind the boxes
• CTAs to start ticking

What you can display

One strong use is the real setup checklist of a SaaS workspace. Other lists:

• Migration checklist. The switch tasks with the vendor done ones pre ticked.
• Compliance checklist. A security review packet mid completion for enterprise pages.
• Launch checklist. Campaign preflight for the product itself, shown as marketing.

Tip: tick the automatic tasks and leave the human ones visible, the split teaches the effort model better than copy can.