Site card

Up: the green dot and its word, the version the site shows, thirty days all up, and three figures.

Up0.1.2-alpha

Website

studionorte.pt

30 days ago to Today: 100% up. No incidents.

Answers in: 1.0 s
Up: 100%
Checked: 2 min ago

Slow: the amber dot and its word, two slow days in the bar, and the answer time that made it slow. No edge: slow is not yet trouble.

Slow0.1.2-alpha

Shop

shop.studionorte.pt

30 days ago to Today: 99.9% up. Incident: Oct 6, Oct 7.

Answers in: 3.4 s
Up: 99.9%
Checked: 2 min ago

Down: the red dot and its word, the danger edge round the card, and no answer time.

Down0.1.2-alpha

Blog

blog.studionorte.pt

30 days ago to Today: 98.7% up. Incident: Sep 26, Oct 10. Outage: Oct 9.

Answers in: No answer
Up: 98.7%
Checked: 2 min ago

Purpose

Shows one site on an overview: whether it answers now, the version it shows, its name and address, its last thirty days as an uptime bar, and how fast it answers, how much of the time it was up and when it was last checked. Three statuses: up, slow and down.

When to use

On an overview of the sites a team runs, where a reader checks that each one answers.

When not to use

For a site with no history of checks. Use a table row with its status and version.
For one incident's story. Use a page with its timeline.

Usage rules

Do

Check the sites often enough that "Checked" stays a few minutes old.
Keep the version in the tag short.

Don't

Show that a site is down by the edge alone.
Put the danger edge on a slow site.

Anatomy

The card, the Card component in its compact layout, its slot body holding the rest. A site that is down adds the card's danger edge.
The top line: the status, the Status dot component with its word, and the version, the Tag component.
The name in the large label style over its address.
The Uptime bar component: one bar a day, with the start, the share up and the end under it.
The figures, under a quiet line: three names in the extra small body style, each over its figure in the medium label style.

Behavior

The page sets the status: the dot's tone and word, and for a site that is down the danger edge. Slow has no edge: it is worth a look, not yet trouble. The card takes no focus; to open a site's details from it, put a link in its title.

What it does for you

The card is an article named by its title.
The status is said in words beside its dot, never only by the dot's color or the edge.
The uptime bar is read as one summary in words; its bars and caption are hidden from assistive technology.
The figures are a description list.

What you must do

Make the title a heading at the level the page needs.
Write a figure with no value in words, such as "No answer", rather than a dash.

How to test

With a screen reader, each card is read as an article by its title, its status in words, the uptime as one summary, and the figures as names and values.
In a forced-color mode, a site that is down still says so in words beside its dot.

The site card's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.

Stylesheet

site-card.css

/* site-site-card — Site card, a block: one site at a glance, whether it answers, the version it shows, its last
 * thirty days and three figures. Copy it into your project and rename site- to your project's own prefix. The frame
 * is the Card component in its compact layout, a site that is down with its danger edge; the status dot, tag and
 * uptime bar are the system's own. The block draws only the lines inside the card's body and the figures' line. */

.site-site-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--smbk-space-inline-sm);
}

.site-site-card__name {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-2);
}

.site-site-card__title {
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-lg-font-family);
  font-size: var(--smbk-typography-label-lg-font-size);
  font-weight: var(--smbk-typography-label-lg-font-weight);
  line-height: var(--smbk-typography-label-lg-line-height);
  letter-spacing: var(--smbk-typography-label-lg-letter-spacing);
}

.site-site-card__address,
.site-site-card__label {
  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);
}

/* Three figures side by side under a quiet line, the same room above and below the line. */
.site-site-card__facts {
  display: flex;
  gap: var(--smbk-space-inline-md);
  margin: 0;
  padding-block-start: var(--smbk-space-inset-lg);
  border-block-start: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
}

.site-site-card__fact {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--smbk-space-2);
  min-width: 0;
}

.site-site-card__figure {
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
  font-variant-numeric: tabular-nums;
}

Menu

Examples

Usage

Website

Slow