Dash

Stat tile

a label, one big number, a sub line and a meter.

dash.meowda.xyz

Examples

CPU

42.1%

user 30% · system 12%

Memory

18.4/ 64 GiB

29% used · 22 GiB cache

GPU

96%

2 GPUs, busiest · 71°C

Network

214 Mbps

↓ 190 Mbps · ↑ 24 Mbps

<div class="dash-tiles">
  <div class="dash-tile">
    <h2>CPU</h2>
    <div class="dash-big">42.1<small>%</small></div>
    <div class="dash-sub">user 30% · system 12%</div>
    <span class="dash-meter">
      <i style="width:42%"></i>
    </span>
  </div>
  <div class="dash-tile">
    <h2>Memory</h2>
    <div class="dash-big">18.4<small>/ 64 GiB</small></div>
    <div class="dash-sub">29% used · 22 GiB cache</div>
    <span class="dash-meter mem">
      <i style="width:29%"></i>
    </span>
  </div>
  <div class="dash-tile">
    <h2>GPU</h2>
    <div class="dash-big">96<small>%</small></div>
    <div class="dash-sub">2 GPUs, busiest · 71°C</div>
    <span class="dash-meter gpu hot">
      <i style="width:96%"></i>
    </span>
  </div>
  <div class="dash-tile">
    <h2>Network</h2>
    <div class="dash-big">214 Mbps</div>
    <div class="dash-sub">↓ 190 Mbps · ↑ 24 Mbps</div>
  </div>
</div>

Classes

Class	What it does
`.dash-tiles`	auto fit grid, 200px minimum
`.dash-tile`	bordered surface
`.dash-big`	28px outfit light
`.dash-sub`	12px muted, one line
`.dash-meter`	4px bar, add mem or gpu, hot turns it red