Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Site status

OverviewStyleGuidelinesCodeAccessibilityDemos
StylesColor schemeConfigurationIconsSpaceInteraction statesStylesColor schemeConfigurationIconsSpaceInteraction 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

Color scheme

Website status is available for both light and dark color schemes.

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
© 2021-2025 Red Hat, Inc. Deploys by Netlify