KPI cards
Build a KPI cards grid with flexbox.
KPI cards side by side with flex
At the top of a sales dashboard we show summary metrics: daily revenue, new customer count, average basket and so on. These are called KPI cards and usually sit side by side.
The handiest way to lay them out is display: flex. After making the container flex, we add gap for spacing and flex-wrap: wrap so cards drop to a new row when space runs out.
Theme colors with custom properties
In lesson one we defined --bg and --card-bg variables. Now we use them: the card background is set with var(--card-bg). This way we can retheme from one place.
If you want a different theme later, just update the :root block; cards, headings and the table pick up the new color automatically.
KPI card design
Each KPI card holds a label (e.g. 'Daily Revenue'), a large value and a small change tag. We set the card background with var(--card-bg) to make it white, add inner padding and round the corners.
In this lesson we only add background and padding; shadow and rounded corners come in the final lesson.
Exercise Add KPI cards: .kpi-list and .kpi-card
Add a .kpi-list block to the stylesheet. Give it display: flex, flex-wrap: wrap and gap: 16px. Then add a .kpi-card block; set its background with var(--card-bg) and add padding: 16px.
Show example solution
/* Sales Dashboard stylesheet */
:root {
--bg: #f5f7fa;
--card-bg: #ffffff;
}
.dashboard {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }
.kpi-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.kpi-card {
background: var(--card-bg);
padding: 16px;
}Test yourself
-
What flex-wrap value moves cards to a new row when the container shrinks?
- nowrap
- wrap-reverse
- wrap
- inherit
Show answer
wrap — Correct. wrap moves cards to a new row automatically.
-
Add 16 pixels of space between cards
.kpi-list { display: flex; flex-wrap: wrap; ____; }Show answer
.kpi-list { display: flex; flex-wrap: wrap; gap: 16px; } -
Match each declaration to its purpose
- display: flex
- flex container
- flex-wrap
- drop cards to next row
- gap
- space between items
- var()
- call a variable