Chart card

<div class="dash-card">
  <div class="dash-top">
    <h2>CPU</h2>
    <div class="dash-legend">
      <span><i style="background:var(--accent)"></i>busy <b>42.1 %</b></span>
    </div>
  </div>
  <div class="dash-plot">
    <div class="dash-yax">
      <span>100%</span>
      <span>50%</span>
      <span>0</span>
    </div>
    <svg viewBox="0 0 300 100" preserveAspectRatio="none">
      <line x1="0" x2="300" y1="0" y2="0" stroke="var(--grid)" vector-effect="non-scaling-stroke" />
      <line x1="0" x2="300" y1="50" y2="50" stroke="var(--grid)" vector-effect="non-scaling-stroke" />
      <line x1="0" x2="300" y1="100" y2="100" stroke="var(--grid)" vector-effect="non-scaling-stroke" />
      <polyline points="0,70 40,62 80,66 120,40 160,48 200,30 240,52 300,44" fill="none" stroke="var(--accent)" stroke-width="1.8" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
    </svg>
  </div>
  <div class="dash-xax">
    <span>5 min ago</span>
    <span>now</span>
  </div>
</div>

<div class="dash-card">
  <div class="dash-top">
    <h2>Network</h2>
    <div class="dash-legend">
      <span><i style="background:var(--ok)"></i>rx <b>↓ 190 Mbps</b></span>
      <span><i style="background:var(--accent)"></i>tx <b>↑ 24 Mbps</b></span>
    </div>
  </div>
  <div class="dash-plot">
    <div class="dash-yax">
      <span>100%</span>
      <span>50%</span>
      <span>0</span>
    </div>
    <svg viewBox="0 0 300 100" preserveAspectRatio="none">
      <line x1="0" x2="300" y1="0" y2="0" stroke="var(--grid)" vector-effect="non-scaling-stroke" />
      <line x1="0" x2="300" y1="50" y2="50" stroke="var(--grid)" vector-effect="non-scaling-stroke" />
      <line x1="0" x2="300" y1="100" y2="100" stroke="var(--grid)" vector-effect="non-scaling-stroke" />
      <polyline points="0,60 50,40 100,55 150,30 200,45 250,20 300,35" fill="none" stroke="var(--ok)" stroke-width="1.8" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
      <polyline points="0,90 50,86 100,88 150,80 200,84 250,78 300,82" fill="none" stroke="var(--accent)" stroke-width="1.8" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
    </svg>
  </div>
  <div class="dash-xax">
    <span>5 min ago</span>
    <span>now</span>
  </div>
</div>