Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
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
UsageWriting ContentCharacter countLayoutBest PracticesRemoving iconsWriting link text too longUsageWriting ContentCharacter countLayoutBest PracticesRemoving iconsWriting link text too long

Usage

Use Website status to inform users about the operational status of a website or domain and provide them with a link to a status page where they can learn more.

Writing Content

The severity of a status should be communicated in as few words as possible. Remove extra words if necessary so the component does not become too wide.

Character count

The recommended maximum character count is listed below and includes spaces.

Element Character count
Link Text 30

Layout

Heirarchy

Website status can be placed higher or lower on a page, it just depends on the type of website.

Placement

Website status is usually placed in the Footer component, but it may be placed somewhere else if it makes sense to do so.

Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element.

Best Practices

Pairing icons with text

To avoid confusion, write link text with the same severity as the status icon.

Image of a site status element with a correct usage of a green checkmark icon and the text 'All systems operational'.

Do

Write link text with the same severity as the status icon and vice versa.

Image of a site status element with an incorrect usage of an orange red exclamation point icon and the text 'All systems operational'.

Don't

Do not make it confusing to understand what the status or severity is.

Removing icons

Always include a status icon, it helps communicate severity visually.

Image of a site status element with a correct usage of a green checkmark icon and the text 'All systems operational'.

Include an icon to make it easier for users to understand.

Image of a site status element with an incorrect usage of an orange red exclamation point icon and the text 'All systems operational'.

Do not remove the status icon.

Do not write link text that is too long, it will take users longer to read and make the component wider.

Image of a site status element with a correct usage of a green checkmark icon and the text 'All systems operational'.

Do

Write link text using as few words as possible.

Image of a site status element with an incorrect usage of an orange red exclamation point icon and the text 'All systems operational'.

Don't

Do not include unnecessary words or punctuation.

© 2021-2025 Red Hat, Inc. Deploys by Netlify