Health index

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Usage
  2. Variants
  3. Layout
  4. Best practices
  1. Usage
  2. Variants
  3. Layout
  4. Best 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 theme components are designed only to work in the light theme, and dark theme components are designed to work only in the dark theme.

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

Use the correct components in the correct theme.

 Light theme 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