Dashboard grid
A twelve-track grid for dashboards and a widget frame: title, period, body, footer. It lays out for the width it gets, so it works beside a sidebar.
Overview
<div class="mn-dash">
<section class="mn-card mn-widget mn-dash-8" aria-labelledby="dw-1"><div class="mn-widget-head"><div><h3 class="mn-widget-title" id="dw-1">Orders</h3><p class="mn-widget-sub">Last 12 weeks</p></div><select class="mn-select mn-input-sm" aria-label="Period" style="width:auto"><option>12 weeks</option><option>6 months</option></select></div>
<div class="mn-widget-body"><svg class="mn-chart-line" style="--h:9rem" data-values="212,240,231,268,254,290,301,288,322,340,331,362" data-labels="W27,W28,W29,W30,W31,W32,W33,W34,W35,W36,W37,W38" data-names="Orders" role="img" aria-label="Orders per week, rising from 212 to 362"></svg></div>
<div class="mn-widget-foot"><span>Updated 4 minutes ago</span><a class="mn-link" href="#">Full report</a></div></section>
<section class="mn-card mn-widget mn-dash-4" aria-labelledby="dw-2"><div class="mn-widget-head"><h3 class="mn-widget-title" id="dw-2">Fulfilment</h3></div>
<div class="mn-widget-body" style="display:grid;justify-items:center;gap:.25rem"><div class="mn-gauge mn-success" role="meter" aria-label="Orders shipped within 24 hours" aria-valuemin="0" aria-valuemax="100" aria-valuenow="86" style="--v:86"><span class="mn-gauge-value">86%</span></div><p class="mn-kpi-foot">shipped within 24 hours · target 90%</p></div></section>
<section class="mn-card mn-widget mn-widget-flush mn-dash-7" aria-labelledby="dw-3"><div class="mn-widget-head"><h3 class="mn-widget-title" id="dw-3">Needs attention</h3><span class="mn-badge mn-badge-soft mn-warning">3</span></div>
<div class="mn-widget-body"><table class="mn-table mn-table-compact"><thead><tr><th scope="col">Order</th><th scope="col">Issue</th><th scope="col" class="mn-num">Age</th></tr></thead><tbody><tr><td>#48213</td><td>Address not found</td><td class="mn-num">2 d</td></tr><tr><td>#48190</td><td>Payment review</td><td class="mn-num">1 d</td></tr><tr><td>#48177</td><td>Out of stock: 1 item</td><td class="mn-num">6 h</td></tr></tbody></table></div></section>
<section class="mn-card mn-widget mn-dash-5" aria-labelledby="dw-4"><div class="mn-widget-head"><h3 class="mn-widget-title" id="dw-4">Sales by channel</h3></div>
<div class="mn-widget-body"><div class="mn-breakdown"><div class="mn-breakdown-bar" role="img" aria-label="Shop 54%, marketplace 27%, wholesale 13%, other 6%"><i style="--v:54"></i><i style="--v:27"></i><i style="--v:13"></i><i style="--v:6"></i></div>
<ul class="mn-breakdown-list"><li><span>Own shop</span><b>€26,030</b><small>54%</small></li><li><span>Marketplace</span><b>€13,020</b><small>27%</small></li><li><span>Wholesale</span><b>€6,270</b><small>13%</small></li><li><span>Other</span><b>€2,890</b><small>6%</small></li></ul></div></div></section>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/dashboard.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-dash | The grid: one column, then halves, then twelve tracks. |
| mn-dash-3 · -4 · -5 · -6 · -7 · -8 · -9 | How many of twelve tracks a child spans on wide containers. Without one, a child spans the full row. |
| mn-widget | A panel. Add mn-card for the surface. |
| mn-widget-head | Title on the left, a control (period, menu) on the right. |
| mn-widget-title · mn-widget-sub | Heading and one line under it. |
| mn-widget-body | Content. mn-widget-flush on the widget removes the side padding (tables, lists). |
| mn-widget-foot | A footer line: a link to the full report, or when the data was updated. |
Accessibility
- Each widget is a <section> with a real heading, so it appears in the page outline.
- Order widgets in the source by importance; the grid only changes how wide they are.
- Say when the data was last updated, in text.