Search blocks by description or jump to a page.
A card panel of five quarterly KPIs as bullet rows, each with qualitative range bands, a quarter to date measure bar, a target tick, and a shared axis.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Bullet KPI Rows is the goal attainment panel, five quarterly KPIs from New ARR to Support CSAT stacked as horizontal bullet rows. Each row layers three shaded qualitative bands for behind, near, and above target, a slim measure bar for the quarter to date value, and a vertical tick at the target, so every metric reads against its goal without a legend lookup. The header callout reads the pace, 3 of 5 on track.
The block is pure CSS positioning from a fixed data array, no chart library. Each attainment percentage maps to a position on a track that spans 0 to 125 percent of target, and a shared tick axis sits below the rows. Swapping in your own KPIs, actuals, and targets is a single array update.
Reach for this block on an executive or team dashboard where the point is progress against goals rather than raw trend. Wire the rows to your metrics backend with each actual and target pulled per quarter, and keep the band thresholds consistent so rows compare cleanly.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the quarterly goal scorecard. Other bullet reads:
Tip: keep the band thresholds identical across rows so a short bar always means the same thing on every KPI.