Dashboard bento

What's included

The first section of a page: a heading, two buttons, and six cards reporting the state of a system — nodes online, latency, uptime, coverage by region. One stylesheet, one script, two font files. No dependencies, no build step, no external requests.

The drawings that carry the figures are traced in CSS: the bar chart, the radar and its sweep, the hatched gauges, the background grid. The original mock-up loaded four images to do it; here there are none, so there's nothing to wait for on load and nothing that pixelates.

Features

• It responds to its own width, not the window's — its four breakpoints are container queries. Dropped into a 640 px column, it rearranges itself as it would on a phone.
• The figures count up — two seconds, an eased curve, a tenth of a second between two numbers, and the written format is preserved while counting: “2,846” never becomes “2846”.
• Works without JavaScript — the script starts by setting the class that hides what it's about to animate. Without it, nothing is hidden: figures at their value, bars at their height.
• One variable for the scale — every measurement derives from the body text size, drawings included. The radar, the hatching and the grid all follow.
• Your figures, in one place — the values that only the drawings carry are variables grouped at the top of the stylesheet; the ones that are read out live in the markup, where a screen reader finds them.
• Reduced motion respected — delays included. The radar sweep then stays at its starting angle: it's an image, not a movement.

Dropping it into a page

Two files to load, then the section:

<link rel="stylesheet" href="dashboard-bento.css">
<script src="dashboard-bento.js" defer></script>
<section class="dashboard-bento">
  <div class="dashboard-bento__backdrop" aria-hidden="true"></div>
  <div class="dashboard-bento__container">
    <div class="dashboard-bento__intro">…</div>
    <div class="dashboard-bento__grid dashboard-bento__grid--top">…</div>
    <div class="dashboard-bento__grid dashboard-bento__grid--bottom">…</div>
  </div>
</section>

Both fonts sit next to the stylesheet, which declares them: nothing to configure. To change the scale of the whole block, one line is enough — .dashboard-bento { --tb-font-size: 0.875rem }.

What you should know

• The breakpoints look at the container. If you drop the block into a box with no defined width, give it one: a query container has to be measurable.
• No inline styles, no inline scripts. The component honours the site's strict security policy, and never uses innerHTML: all it does is set classes and write text.
• One flaw in the mock-up has been fixed. Between 992 and 1060 px, and below 360 px, the badge on two cards spilled out of its card for want of room next to the figure. Here it moves below; the original behaviour comes back with flex-wrap: nowrap on .dashboard-bento__inline.
• The design comes from elsewhere. The proportions follow those of a section from a commercial Webflow template, measured on the site itself — box by box, at five widths, down to the durations of its animations. The code itself is original, and the four images it carried were measured and then redrawn.