Search blocks by description or jump to a page.
Stat cards that place a short line of context under each number. Use when a raw figure needs explanation, like a comparison to the prior month.
With Description is a four-card stat row. Each card holds an uppercase category label at the top, then a large numeric value sitting beside a small directional arrow and a percentage, and finally a short sentence below the number that spells out the change in plain terms, for example "+20.1% from last month". The arrow is green for positive movement and red for negative, so the direction reads without parsing the text. The grid collapses from four columns on wide screens to two on small screens and a single column on the narrowest viewports.
The four demo metrics are Revenue, Subscriptions, Churn Rate, and Active Users. All four are fully independent. You can replace any label, number, percentage, or description sentence without affecting the others, and you can add or remove cards by copying or deleting a card block inside the grid.
Reach for this layout when a raw number needs a sentence of context to be meaningful. On an AI assistant product dashboard this is the natural place to surface API calls made, tokens consumed, active integrations, and average response latency, each with a note like "vs. prior 30 days" so product managers can judge health at a glance. It outperforms a plain number grid when your audience is less technical and needs the figure translated, and it outperforms a badge-only variant when the comparison period varies per metric and a short sentence communicates that more clearly than a badge alone.
A natural flow around it on an Application page:
Before
After
Each card holds one metric and its period-over-period story. Some ways to fill the four slots:
Tip: keep every description sentence to one comparison point so the row stays scannable and no card grows taller than its neighbours.