Onboarding Checklist

About this block

Onboarding Checklist splits into two columns. The left column holds a heading, two short paragraphs of onboarding copy, and a pair of call to action buttons. The right column is a bordered card titled "Getting started" with a completion counter in the top right corner. Below that header, a divider list shows five tasks. Each task has a circle indicator (filled with a check for done, a primary colored ring for in progress, and a plain border ring for todo), a task title, and a short detail note. The one in progress task also shows a thin progress bar beneath the title row.

All five checklist items and their detail strings are plain data, so you can swap titles, detail notes, and states freely. The completion counter is independent copy, so update it to match your real item count. The two body paragraphs and both buttons are standalone, making it straightforward to adjust the pitch or remove one button without affecting the card.

When to use

Reach for this block on a product marketing page where the length of setup is a buying concern. For an online education platform it works well on a course creator landing page to reassure instructors that publishing their first course is a same day task, not a weekend project. It outperforms a plain numbered steps layout when partial progress matters, because the mixed done, in progress, and todo states make the path feel realistic rather than abstract.

A natural flow around it on a Marketing Pro page:

Before

• A hero section to establish the product value before explaining the setup path
• Features that cover what learners or creators get once they are live

After

• Testimonials from teams that went through the same setup to reinforce the "one afternoon" claim
• A CTA to close the page after confidence has been built

What you can display

The frame suits any product where a short, sequential setup is a selling point. A few directions to take the checklist content:

• Course publishing steps. Replace the items with tasks like uploading a syllabus, recording a welcome video, and setting pricing so educators see the full path before they commit.
• Integration readiness. Show LMS or payment provider connections as the in progress step with a real percentage so teams know exactly where they stand.
• Team setup milestones. Use the done and todo states to reflect account creation, seat invitations, and first content review so managers can track group progress at a glance.

Tip: keep all five item titles short enough to sit on one line inside the card so the detail notes stay aligned and the layout stays tidy.