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

Health index

OverviewStyleGuidelinesCodeAccessibilityDemos
UsageVariantsLayoutBest practicesUsageVariantsLayoutBest practices

Usage

Use health index to communicate the health or security of something using letter grades and severity levels.

Variants

There are four available variants: Small, Default, Large, and Extra large. Each variant has an associated level of emphasis.

A row of health index components with emphasis descriptions under each size. Small is low, default is medium, large is high, and extra large is highest.
When to use each variant of health index
Variant Emphasis Use case
Small Low Use to quickly and simply display a health grade if there is lots of text or other content nearby
Default Medium Use to display a health grade without showing other possible colors and grades
Large High Use to display a health grade while showing other possible colors and grades
Extra Large Highest Use to display a health grade while showing other possible colors and grades

Severity levels

When health index shows a grade of “A” and the severity level color is green, the experience associated with the index is healthy or in its optimal state. It is important to note that both the letter grade and color are included as indicators, as you should not rely solely on color.

Helpful tip

The Ecosystem Catalog team is using a health index to grade the security of their container images. Read their documentation to learn more about how they are calculating grades.

 A 3 by 3 grid of small size health index components. Each row has letter grades A, C, and F. Under each letter grade is text that describes a safe, at risk, or vulnerable state.

Layout

Health index should always be placed near helpful text or other content that explains it. This context should be available to all users, including those using assistive technologies. Without context, a user might interpret health index only as colored boxes with letters.

Warning

Do not use health index without text or other contextual content.

Stacked

Health index can be stacked with other content. In such cases, we recommend using the Small variant, as it does not take focus away from surrounding information.

A small size health index component with a letter grade A at the bottom of a stack of text.

Inline

Health index can also be inserted inline with text and components. In such cases, we recommend using the Large or Extra large variants to maintain equal hierarchy among elements.

An extra large size health index component with a letter grade F in between a heading, body text, and a call to action.

Best practices

Letter grades and color consistency

Letter grades and severity level colors are designed to work together. Mixing them up will cause users to be confused as to what the health of something actually is.

Small, default, and large size health index components displaying correct letter grades and severity colors.

Keep letter grades and severity level colors consistent.

 Small, default, and large size health index components displaying incorrect letter grades and severity colors.

Do not mix up letter grades and severity level colors.

Theming

Light scheme components are designed only to work in the light scheme, and dark scheme components are designed to work only in the dark scheme. Color scheme mismatches can occur when manually styling containers' background colors. Use a themable container like surface or card, or set the color-scheme CSS property on the element's container to ensure proper rendering.

Dark scheme small, default, and large size health index components.

Use the correct components in the correct theme.

 Light scheme small, default, and large size health index components used incorrectly in the dark theme.

Do not use components from one theme in another theme.

Mixing variants

Each variant is unique and designed to meet a specific user need.

Small, default, and large size health index components displaying correct letter grades and severity colors.

Use the available variants as intended.

 Large size health index component displaying extra text and an incorrect combination of styles.

Do not combine variants or add other elements like text.
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify