Health index

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard Wrap lines

Add it 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

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 displays a health grade (A–F) for a particular item or package.

Slots 0
None
Attributes 2
Attribute DOM Property Description Type Default
size size

Sets the size of the health index Defaults to md

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

Sets the health grade Defaults to A

 
'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 39
Token Copy
--rh-border-width-sm
--rh-color-border-subtle
--rh-color-gray-70
--rh-color-gray-95
--rh-color-green-10
--rh-color-green-20
--rh-color-green-40
--rh-color-green-60
--rh-color-green-70
--rh-color-orange-10
--rh-color-orange-20
--rh-color-orange-40
--rh-color-orange-60
--rh-color-orange-70
--rh-color-red-10
--rh-color-red-40
--rh-color-red-60
--rh-color-red-70
--rh-color-red-orange-10
--rh-color-red-orange-30
--rh-color-red-orange-50
--rh-color-red-orange-60
--rh-color-red-orange-70
--rh-color-surface-dark-alt
--rh-color-surface-darkest
--rh-color-surface-lightest
--rh-color-white
--rh-color-yellow-10
--rh-color-yellow-30
--rh-color-yellow-50
--rh-color-yellow-70
--rh-font-family-code
--rh-font-size-body-text-md
--rh-font-size-body-text-xl
--rh-font-weight-code-medium
--rh-length-xs
--rh-space-2xl
--rh-space-lg
--rh-space-xl
Edit this page on GitHub