Component

Bars

The 90-day uptime bar strip from the tyrone dashboard, with the service row it lives beside.

Preview

Services · 90 days

giteagit.meowda.xyz

100%

print-apiprint.meowda.xyz

99.4%

ci-runnerbuild-03

96.1%

90 days agotoday

Code

<div class="card" style="max-width:560px">
  <h2>Services · 90 days</h2>
  <div style="margin-top:6px">
    <div class="svc">
      <span class="d"></span>
      <div class="n">gitea<small>git.meowda.xyz</small></div>
      <div class="bars" data-mw-bars="ok"></div>
      <div class="p">100%</div>
    </div>
    <div class="svc">
      <span class="d"></span>
      <div class="n">print-api<small>print.meowda.xyz</small></div>
      <div class="bars" data-mw-bars="mix"></div>
      <div class="p">99.4%</div>
    </div>
    <div class="svc">
      <span class="d bad"></span>
      <div class="n">ci-runner<small>build-03</small></div>
      <div class="bars" data-mw-bars="bad"></div>
      <div class="p">96.1%</div>
    </div>
  </div>
  <div class="axis"><span>90 days ago</span><span>today</span></div>
</div>

This component is interactive — include behaviors.js after your markup.

← Badge Button →