# Uptime · MIAN A status page row: a service, its state today and one bar per day of history. Hover a day for what happened. - Id: `uptime` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/uptime - Use for: status page, service uptime, incident history, system status, availability bars. - Alternatives: timeline. 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 ``` ## Classes - `mn-uptime`: The list of services. - `mn-uptime-row`: One service. - `mn-uptime-head`: Name, a status badge and the uptime figure (). - `mn-uptime-bars`: One per day. data-s="degraded", "down" or "none" (no data); data-tip is the hover text. - `mn-uptime-foot`: The ends of the time axis. ## Accessibility - Days that were not fine are shorter as well as coloured, so the history reads without colour. - State today’s status in words in the badge. - Give each bar strip role="img" and a label that summarises it (“90 days, two incidents”). ## Examples ### Services ```html
APIOperational99.98% · 90 days
DashboardOperational100% · 90 days
WebhooksDegraded99.71% · 90 days
90 days agoToday
``` ## Source Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/uptime/source