Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries 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 Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Health index

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-health-indexImportingUsagerh-health-index

Importing

Add rh-health-index to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-health-index/rh-health-index.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-health-index grade="C" size="lg">C</rh-health-index>

<script type="module">
  import '@rhds/elements/rh-health-index/rh-health-index.js';
</script>
Copy to Clipboard Wrap lines

rh-health-index

Health index provides a visual grade (A through F) for communicating the health or security level of an item. Authors must set the grade attribute and should place it in context that makes its purpose clear. It uses ARIA meter role so screen reader users can read the grade. This element should not receive keyboard focus, as it is non-interactive.

Slots 0

None

Attributes 2

Attribute DOM Property Description Type Default
size size

Sets the visual size of the health index. The sm size renders only the active grade letter. The default md size renders all grade boxes without labels. The lg and xl sizes render all grade letters with the active grade highlighted and bordered.

 
'sm' | 'md' | 'lg' | 'xl'
 
'md'
grade grade

Sets the health grade from A (best) to F (worst). Grades A and B use success status colors, C uses warning, D uses caution, and E and F use danger. The value is case-insensitive; lowercase input is normalized to uppercase.

 
'A' | 'B' | 'C' | 'D' | 'E' | 'F'
 
'A'

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 24

Token Description Copy
--rh-space-lg

Grade label inline end spacing

16px spacer
--rh-color-surface-status-success

A grade small box fill

A grade large box fill

B grade small box fill

B grade large box fill
--rh-color-status-success

A grade small box border color

A grade large box border color

A grade medium box fill

A grade accent bar color

B grade small box border color

B grade large box border color

B grade medium box fill

B grade accent bar color
--rh-color-surface-status-warning

C grade small box fill

C grade large box fill
--rh-color-status-warning

C grade small box border color

C grade large box border color

C grade medium box fill

C grade accent bar color
--rh-color-surface-status-caution

D grade small box fill

D grade large box fill
--rh-color-status-caution

D grade small box border color

D grade large box border color

D grade medium box fill

D grade accent bar color
--rh-color-surface-status-danger

E grade small box fill

E grade large box fill

F grade small box fill

F grade large box fill
--rh-color-status-danger

E grade small box border color

E grade large box border color

E grade medium box fill

E grade accent bar color

F grade small box border color

F grade large box border color

F grade medium box fill

F grade accent bar color
--rh-space-xl

Default box size

24px spacer
--rh-space-2xl

Extra-large box size

32px spacer
--rh-font-size-body-text-xl

Extra-large grade font size

20px font size
--rh-font-size-body-text-md

16px font size
--rh-font-family-code

Grade letter font family

Code font family
--rh-color-border-subtle

Container border color
--rh-color-surface-dark

Tertiary surface (dark theme)
--rh-color-border-subtle-on-light

Medium box border in light mode

Subtle border color (light theme)
--rh-color-icon-subtle

Medium box border in dark mode
--rh-color-surface-lightest

Grade box surface in light mode

Medium box fill in light mode

Primary surface (light theme)
--rh-length-xs

Accent bar height

4px length token
--rh-font-weight-code-medium

Active grade letter weight

Medium font weight
--rh-color-text-primary

Small letter color

Large letter color

Small letter color

Large letter color

Small letter color

Large letter color

Small letter color

Large letter color

Small letter color

Large letter color

Small letter color

Large letter color

Active grade text color

Small grade letter color in dark mode

Active grade text color
--rh-color-surface-darkest

Small box fill in dark mode

Medium box fill in dark mode

Active box fill in dark mode

Primary surface (dark theme)
--rh-border-width-sm

Container border width

Grade box border width

Active box border width

1px border width; Example: Secondary CTA or Button
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify