Site status

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Styles
  2. Theme
  3. Configuration
  4. Icons
  5. Space
  6. Interaction states
  1. Styles
  2. Theme
  3. Configuration
  4. Icons
  5. Space
  6. Interaction states

Styles

Website status is a combination of an icon and link within a very small card. It is designed to be understood immediately. Otherwise, a user can click on the link to learn more.

Anatomy

Image of a site status element with a green checkmark and the text 'All systems operational'
  1. Icon
  2. Link
  3. Container

Theme

Currently, Website status is only available in the dark theme. You may use Website status in the light theme if necessary. If you need a separate light version designed instead, contact us.

Image of a site status element with a green checkmark and the text 'All systems operational on a dark background' Image of a site status element with a green checkmark and the text 'All systems operational on a light background'

Configuration

Website status has a fixed height and its width changes depending on the amount of link text. The icon and link are horizontally aligned to the card as well.

Image of a site status element with a green checkmark and the text 'All systems operational' with fixed height, width and horizontal alignment indicators.

Icons

Website status includes three icons that also indicate the severity of the status.

Three images of site status elements, one with a green checkmark and the text 'All systems operational', the second with a yellow exclamation point and the text 'Partial system outage', and the third with a red exclamation point and the text 'Major system outage'.

Space

Space values remain the same at all viewport sizes.

Image of a site status element with a green checkmark and the text 'All systems operational' with space indicators. Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with space indicators. Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with space indicators at a small viewport size.

Interaction states

Only the link is selectable and it should be underlined in all interaction states.

Three images of a site status element with a green checkmark and the text 'All systems operational' first one displaying the mouse hover state, the second the keyboard state, the third a combination of hover and focus.
Edit this page on GitHub