A strip of days, one bar each, colored by whether a site or service was up, had an incident or was down, with the share up in words.
Options
The uptime bar has no choices: it is drawn one way.
Examples
Usage
Thirty days, one bar a day, under the name of what it measures. Two days had an incident; the share up is in words, and a screen reader hears which days.
Website uptime
All up
Every day up: every bar in the success color.
An outage
A day with an outage in the danger color, beside days with an incident in the warning color.
The last 24 hours
One bar an hour. The bars share the width whatever their number.
Without the caption
The bars alone. A screen reader still hears the summary.
Several services
Services one under another over the same thirty days, so their bars line up.
Website
Shop
Customer portal
Guidelines
Purpose
Shows how a site or a service did over a stretch of time, a bar for each day or hour: up the whole time, an incident when it was slow or partly down, or an outage when it was down. A caption under it gives the start, the share of time up and the end. It answers "has this been reliable?" at a glance; the words answer it exactly.
When to use
- On a status page or a card for a site or a service, for the last 30 days or 24 hours.
- Several services one under another, each with its own uptime bar over the same days.
When not to use
- To show how something is now. Use a badge.
- For a measure that is not up or down, such as response times. Use a line chart.
Usage rules
Do
- Say what it measures above it, such as "Website uptime".
- Give the share up with the precision that matters, such as "99.9% up".
- Give the same span to every uptime bar on a page.
Don't
- Rely on the red and amber bars to say what went wrong. Say it in words where the reader can act on it.
- Show more bars than fit at two pixels each; show hours for a day and days for a month.
Website uptime
Say what it measures above it, and the share up under it.
Bars alone, with no name and no share up, leave the colors to say how it went.
Anatomy
- The block, as wide as the space it is given.
- The bars part, a row of bar parts of equal width, one per period, oldest at the left. Each bar's status is a modifier of the part: up, incident or outage, in the success, warning and danger colors.
- The caption part: the start part at the left, the uptime part, the share up, in the middle, and the end part at the right.
- The hidden part: the summary a screen reader hears instead of the bars.
Behavior
The bars share the width equally, whatever their number. The caption is optional; without it the bars stand alone and a screen reader still hears the summary. Pointing at a bar shows the browser's own tooltip, with its period and how it went (up, incident or outage); hand-written markup puts the same words in a title on the bar. Nothing moves and nothing takes focus.
Accessibility
What it does for you
- The bars and the caption are hidden from screen readers, which hear one summary instead: the start, the end and the share up, then the periods with an incident and those with an outage, named by their labels.
- The share up is in words under the bars, so the colors are never the only way to tell how it went.
- Nothing about it takes focus.
- In high contrast mode the bars keep their colors; the summary says the same in words.
What you must do
- Give each period a label a reader understands, such as "Oct 12".
- A page can write its own summary where the default does not fit.
- In markup written by hand, put the summary in the hidden part and hide the bars and the caption.
How to test
- With a screen reader, the bars and the caption are skipped and one summary is read: the start, the end, the share up, and the periods with an incident or an outage by their labels. Without a caption, the summary is still read.
- Tab through the page: focus never lands on the uptime bar.
- In a forced-color mode, the bars keep their colors and the summary says the same in words.
Source
The files the uptime bar is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-uptime-bar — Uptime bar. Figma "Uptime bar" 7580:263.
* A row of bars of equal width, one per period, as tall as a small control and close together, each in the
* color of its status: success for up, warning for an incident, danger for an outage. Under it, a caption with
* the start at the left, the share up in the middle and the end at the right. The words carry the meaning:
* a screen reader hears a summary with the periods that were not up, and the caption gives the share up. */
.smbk-uptime-bar {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-xs);
min-width: 0;
}
/* The block frames the words it hides for screen readers, so they stay inside it wherever it is placed: without a
frame they hang from the page itself and stretch it, past the end of an area that scrolls. No weight, so a parent
that places the block keeps its say. */
:where(.smbk-uptime-bar) {
position: relative;
}
.smbk-uptime-bar__bars {
display: flex;
gap: var(--smbk-space-2);
height: var(--smbk-size-28);
}
.smbk-uptime-bar__bar {
flex: 1 1 0;
min-width: 0;
border-radius: var(--smbk-radius-2);
background: var(--smbk-color-feedback-success-icon);
}
.smbk-uptime-bar__bar--status-incident { background: var(--smbk-color-feedback-warning-icon); }
.smbk-uptime-bar__bar--status-outage { background: var(--smbk-color-feedback-danger-icon); }
.smbk-uptime-bar__caption {
display: flex;
justify-content: space-between;
gap: var(--smbk-space-inline-md);
margin: 0;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-xs-font-family);
font-size: var(--smbk-typography-body-xs-font-size);
font-weight: var(--smbk-typography-body-xs-font-weight);
line-height: var(--smbk-typography-body-xs-line-height);
letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
text-transform: var(--smbk-typography-body-xs-text-transform);
}
.smbk-uptime-bar__uptime {
font-variant-numeric: tabular-nums;
}
/* The summary, for screen readers only. */
/* .smbk-uptime-bar__hidden: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */
/* ---- high contrast (forced colors) ---- */
/* The bars keep their status colors; the summary and the caption say the same in words. */
@media (forced-colors: active) {
.smbk-uptime-bar__bar {
forced-color-adjust: none;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| space.stack.xs--smbk-space-stack-xs | 4px | Spacing | |
| space.2--smbk-space-2 | 2px | Spacing | |
| size.28--smbk-size-28 | 28px | Size | |
| radius.2--smbk-radius-2 | 2px | Radius | |
| color.feedback.success.icon--smbk-color-feedback-success-icon | light: #037a1fdark: #54b85bchanges with theme | Color | |
| color.feedback.warning.icon--smbk-color-feedback-warning-icon | light: #b14904dark: #fa8349changes with theme | Color | |
| color.feedback.danger.icon--smbk-color-feedback-danger-icon | light: #cc0d0ddark: #fe7d6dchanges with theme | Color | |
| space.inline.md--smbk-space-inline-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| color.text.subtle--smbk-color-text-subtle | light: #4e555edark: #9ba5b1changes with theme | Color | |
| typography.body-xs--smbk-typography-body-xs-font-family--smbk-typography-body-xs-font-size--smbk-typography-body-xs-font-weight--smbk-typography-body-xs-line-height--smbk-typography-body-xs-letter-spacing--smbk-typography-body-xs-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
Manifest
{
"name": "uptime-bar",
"block": "smbk-uptime-bar",
"summary": "A strip of days, one bar each, colored by whether a site or service was up, had an incident or was down, with the share up in words.",
"adapt": "css",
"axes": {},
"flags": {},
"parts": [
"bars",
"bar",
"caption",
"start",
"uptime",
"end",
"hidden"
],
"figmaNodeId": "7580:263"
}