Seven dashboard pieces: an app shell with sidebar and header, a row of KPI cards, a weekly sales chart made from list items, a recent orders table, widgets placed with named grid areas, an activity feed and the two-column settings layout.
The skeleton of most dashboards built with grid-template-areas: a sidebar, a header and a main area. Under 420px of container width the areas are redefined to stack, so the whole reflow is a single property change.
Four headline numbers, each with its label, change since last period and a direction word. Up and down are written as text (up 12%) as well as coloured arrows, so the meaning does not rely on red and green.
View code
<ul class="db2"><li><span>Revenue</span><b>$48.2k</b><em class="up">↑ up 12%</em></li><li><span>Orders</span><b>1,204</b><em class="up">↑ up 4%</em></li><li><span>Refunds</span><b>18</b><em class="dn">↓ down 9%</em></li><li><span>Avg order</span><b>$40</b><em>no change</em></li></ul>
A weekly sales card with a bar chart made from list items whose heights come from a custom property. It is a list, so each bar can carry its day and value as text for screen readers, which an image of a chart cannot.
A card with a compact table of recent orders and status pills. The table has a caption, the wrapper scrolls sideways on small screens instead of squashing columns, and the status is text inside the pill, not just its colour.
Dashboard widgets placed with grid-template-areas strings, which read like a map of the layout. A container query swaps in a different map for narrow spaces, moving the chart above the side widgets without touching the HTML.
A narrow panel listing recent activity with an avatar, an action sentence and a relative time in a time element with the exact timestamp. The list scrolls inside the panel so it never pushes the rest of the dashboard down.
View code
<section class="db6" aria-labelledby="db6h"><h3 id="db6h">Activity</h3><ul tabindex="0" aria-label="Activity, scroll"><li><span class="av" aria-hidden="true">AR</span><p><b>Ana</b> refunded order #1040 <time datetime="2026-10-05T09:12">2 min ago</time></p></li><li><span class="av" aria-hidden="true">JK</span><p><b>Jonas</b> added 3 products <time datetime="2026-10-05T08:40">35 min ago</time></p></li><li><span class="av" aria-hidden="true">MT</span><p><b>Mei</b> changed shipping rates <time datetime="2026-10-05T07:55">1 h ago</time></p></li><li><span class="av" aria-hidden="true">AR</span><p><b>Ana</b> published a discount <time datetime="2026-10-04T17:20">yesterday</time></p></li></ul></section>
The settings pattern: each section's title and explanation on the left, its fields on the right. On narrow containers the description goes above the fields. Every field has a visible label and the sections are fieldsets with legends.
View code
<form class="db7"><fieldset><div class="d"><legend>Store details</legend><p>Shown on invoices and emails.</p></div><div class="f"><label>Store name<input value="Linea Home"></label><label>Support email<input type="email" value="help@example.com"></label></div></fieldset><fieldset><div class="d"><legend>Currency</legend><p>Prices are shown in this currency.</p></div><div class="f"><label>Currency<select><option>EUR</option><option>GBP</option><option>USD</option></select></label></div></fieldset></form>
grid-template-areas describes a dashboard as a small text map. Changing the map in a container or media query rearranges the whole layout without touching the HTML.
Charts that can be read
A bar chart built from list items can carry each value as text for screen readers. Image or canvas charts need a table or summary alongside them.
Status is never colour alone
Paid, Shipped and Refunded should be words inside their pills. Write up and down with KPI changes too, so red and green are not the only signal.
Tables scroll, they do not squash
Put wide tables in a focusable wrapper with overflow-x: auto and a label. Squashing columns into a narrow screen makes the data unreadable.
Frequently asked questions
Is this a full admin template?
No. These are layout building blocks you can combine and wire to your own data.
Why use container queries here?
Dashboards are made of widgets placed in columns of different widths; each widget adapts to its own space.
Do I need a chart library?
For simple bars, no. For line charts, axes and tooltips, a library or SVG is better.