Search blocks by description or jump to a page.
Horizontal bars that fill to show milestones reached against a target. Drop it on a results page to visualize goals hit and progress toward each one.
Achievement Bars opens with a centered heading section: a small badge labels the period (for example "Q3 Progress"), a bold heading names the section, and a short description sits below. Underneath that, a vertical stack of bordered cards lists each goal one per row. Inside every card a title and a colored status indicator (completed, on track, or at risk) sit on the same line, a large current value anchors the left, the target value sits on the right, and a labeled progress bar fills the bottom of the card. The bar and its status badge both shift color to match the goal state: green for completed, amber for at risk, and blue for on track.
Each card is independent, so you can add or remove goals freely. The badge text, the section heading, and the description are all plain copy you can rewrite. Values are formatted per goal: currency, plain numbers, percentages, or time units. Progress can exceed 100 percent when a target is surpassed, as the retention rate card in the demo shows.
Reach for this block on a results or review page where each goal needs its own visible status rather than a single aggregate number. It suits a developer tools company well for a public roadmap or quarterly review page, showing milestones like active integrations, API uptime, and support response time side by side. It communicates more signal than a plain stats grid because the bar and the status badge together answer both "how far?" and "is this healthy?" without extra explanation.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each card holds one goal, so the block is most useful when you have a small set of distinct targets that each deserve individual attention. A few ways to fill it:
Tip: keep the goal list to four or five items. Beyond that the cards stack long and readers stop reading the lower entries.