Simple Cards
Clean metric cards that display a label and a single number set side by side. Use across a dashboard header to surface key totals at a glance.
Clean metric cards that display a label and a single number set side by side. Use across a dashboard header to surface key totals at a glance.
Search blocks by description or jump to a page.
Simple Cards is a four-column grid of metric cards. Each card holds an uppercase muted label at the top and a large numeric value directly below it. Two of the four cards also show a small inline trend indicator next to the value: an arrow paired with a percentage in green for a gain or red for a decline, so a reader sees direction without hunting for it. The grid collapses to two columns on smaller viewports.
Every card is independent. You can rewrite the label and value copy, remove or add trend arrows on individual cards, or change the number of cards in the row without affecting the others. The block carries no heading of its own, so it slots cleanly beneath a page title or dashboard header you supply separately.
Reach for this block at the top of a dashboard or overview screen where you need to surface three to five totals at once without visual complexity. For an online education platform it works well above a course table, showing enrolled learners, completion rate, average quiz score, and total video views in a single sweep. Because the cards carry no icons or descriptions, they read faster than the richer variants in this group, which makes them the right default when the numbers alone tell the story.
A natural flow around it on an Application page:
Before
After
Any set of key figures your learners or admins need to see at a glance:
Tip: limit the row to four cards so each value stays large and readable; more than five figures in one sweep tends to blur together.