Progress Tracker Hero
A hero with a step progress tracker next to a headline and CTA. Use it to show a setup flow or journey at the top of an onboarding landing page.
A hero with a step progress tracker next to a headline and CTA. Use it to show a setup flow or journey at the top of an onboarding landing page.
Search blocks by description or jump to a page.
Progress Tracker Hero opens with a small announcement banner linking to a new feature, followed by a centered headline and a one-paragraph subtitle. Below that sits a card containing the step tracker: a "Setup Progress" heading paired with a badge showing the current step count, a vertical list of five numbered steps each rendered as a filled circle (completed steps show a check icon, the active step is outlined, future steps are muted), and a horizontal progress bar beneath the list with a plain percentage label. Two action buttons sit below the card, and a footer line shows an estimated time alongside a skip link.
Every piece of copy is independent. You can rename or reorder the steps, adjust the number of steps, change how many are marked complete, and update the percentage bar to match. The announcement banner, the estimated time line, and the skip link can each be removed without affecting the rest of the layout.
Reach for this block when the page is the first screen a new user lands on after signing up, and you want them to understand the setup journey before they dive in. For an online education platform it works particularly well at the start of a course enrollment flow, showing learners exactly which stages remain before they reach their first lesson. It communicates progress at a glance in a way that a plain bullet list or a feature grid cannot, because the visual state of each step tells the story without requiring the visitor to read every word.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block has three distinct zones you can adapt independently:
Tip: keep the step list to five items or fewer so the card stays compact and the progress bar feels meaningful rather than overwhelming.