Metric With Target Card
A single metric versus its target on a horizontal progress track with the gap and pace stated plainly.
A single metric versus its target on a horizontal progress track with the gap and pace stated plainly.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Metric With Target Card shows one metric against its stated goal on a horizontal div progress track. The card carries Revenue this quarter, $91,400 of $111,000 target, the track filled to 82%, the gap called out as $19k remaining, and the pace line Pace: on track. Deadline Jun 30. Nothing is hidden behind hover states.
The metric object holds current, target, deadline, and note as named fields. The track width is computed once at module level so the server render is stable; the stated gap is more useful than the percentage alone.
Reach for this block anywhere a single metric needs to be held against a hard target with a deadline, a sales quota panel, a fundraising thermometer, a sprint goal. Wire current to your live metric endpoint and deadline to the period end date.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a quarterly revenue quota card. Other targets:
Tip: the gap in plain currency or count is what people act on; the percentage alone rarely moves the needle.