# Dashboard grid · MIAN

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.

- Id: `dashboard` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/dashboard
- Use for: dashboard layout, dashboard grid, widget panel, admin overview page, analytics overview.
- Alternatives: app-shell, bento.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Overview

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/dashboard/source