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>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>rh-health-index
Health index displays a health grade (A–F) for a particular item or package.
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
size |
size |
Sets the size of the health index
Defaults to |
|
|
grade |
grade |
Sets the health grade
Defaults to |
|
|
| Token | Copy |
|---|---|
--rh-border-width-sm
|
|
--rh-color-border-subtle
|
|
--rh-color-border-subtle-on-light
|
|
--rh-color-green-10
|
|
--rh-color-green-20
|
|
--rh-color-green-30
|
|
--rh-color-green-40
|
|
--rh-color-green-60
|
|
--rh-color-green-70
|
|
--rh-color-icon-subtle
|
|
--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
|
|
--rh-color-surface-darkest
|
|
--rh-color-surface-lightest
|
|
--rh-color-text-primary
|
|
--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
|
|
