Search blocks by description or jump to a page.
Stat cards that pair a number with a progress bar moving toward a target. Use to show goal completion for revenue, storage, or active user counts.
With Progress is a four card stat grid. Each card holds an uppercase label at the top, a large numeric value beneath it, and a slim progress bar running across the bottom of the card. The four cards sit in a responsive grid that collapses to two columns on small screens and expands to four columns on wide screens.
The label, value, and progress bar fill amount are the only moving parts in each card. You can update the copy and numbers freely, add or remove cards by repeating or deleting card blocks, and swap in any metric that maps naturally to a percentage or a proportion of a cap.
Reach for this block on a dashboard where each key figure has a known ceiling or target, and where showing how close the current value is to that ceiling matters as much as the number itself. On a real estate marketplace a property manager can see at a glance what share of listed units are occupied, what share of a monthly leads target has been hit, or how close total enquiry volume is to a service tier limit. It works better than a plain stat card when the ratio tells a different story than the raw number alone, and better than a chart when four quick reads side by side are all the context the screen needs.
A natural flow around it on an Application page:
Before
After
Each card needs a label, a value, and a fill level that maps to the progress bar. A few ways to use the frame:
Tip: keep the four metrics thematically related so the row reads as one coherent status snapshot rather than four unrelated numbers.