Health index
On this page
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
{
"imports": {
"@rhds/elements/rh-health-index/rh-health-index.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-health-index/rh-health-index.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
"@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
"@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
"@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
"@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
"@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
"@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
"@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
"@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
"@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
"@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
"@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
"@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
"@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/css/",
"@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/js/media.js",
"lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
"lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
"prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
"prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
"tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
}
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow 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
Copied!
Wrap lines
Overflow 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
Copied!
Wrap lines
Overflow lines
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-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
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.