Progress Card
A card pairing a progress bar with a label and value reading. Use it to show task completion, goals, or usage limits inside a dashboard or account view.
A card pairing a progress bar with a label and value reading. Use it to show task completion, goals, or usage limits inside a dashboard or account view.
Search blocks by description or jump to a page.
Progress Card is a single card for tracking multi-part work toward a goal. A header carries a title and short description, then the body opens with a prominent overall completion row: a label and percentage sit side by side above a filled bar. Below that, three secondary rows repeat the same label-plus-value layout at a slightly lighter weight, each with its own thinner bar. A footer closes the card with two buttons, one outlined for detail views and one solid for committing an update.
The card holds exactly as many rows as you put in it. You can add or remove the secondary progress items, swap the demo labels and percentages for real data, and relabel or hide either footer button without disturbing the rest of the layout.
Reach for this block when a single item needs a breakdown of how far along its parts are, rather than a flat single-bar summary. It fits naturally on a patient portal or appointment dashboard in a healthcare scheduling product, where you might show overall intake completion alongside individual stages like forms, consent, and insurance verification. It is a stronger fit than a plain status card when the reader needs granular progress at a glance rather than just a state label.
A natural flow around it on a Components page:
Before
After
The block is built around measurable stages of a single process. A few concrete fits:
Tip: keep the secondary rows to three or four items so each bar stays readable and the footer buttons remain close to the content above them.