Health index

OverviewStyleGuidelinesCodeAccessibilityDemos

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.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines
NPM
npm install @rhds/elements
Copy to Clipboard Wrap lines
JSPM
<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 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
Full CSS Variable Permalink to this token
--rh-color-border-subtle
Full CSS Variable Permalink to this token
--rh-color-gray-70
Full CSS Variable Permalink to this token
--rh-color-gray-95
Full CSS Variable Permalink to this token
--rh-color-green-10
Full CSS Variable Permalink to this token
--rh-color-green-20
Full CSS Variable Permalink to this token
--rh-color-green-40
Full CSS Variable Permalink to this token
--rh-color-green-60
Full CSS Variable Permalink to this token
--rh-color-green-70
Full CSS Variable Permalink to this token
--rh-color-orange-10
Full CSS Variable Permalink to this token
--rh-color-orange-20
Full CSS Variable Permalink to this token
--rh-color-orange-40
Full CSS Variable Permalink to this token
--rh-color-orange-60
Full CSS Variable Permalink to this token
--rh-color-orange-70
Full CSS Variable Permalink to this token
--rh-color-red-10
Full CSS Variable Permalink to this token
--rh-color-red-40
Full CSS Variable Permalink to this token
--rh-color-red-60
Full CSS Variable Permalink to this token
--rh-color-red-70
Full CSS Variable Permalink to this token
--rh-color-red-orange-10
Full CSS Variable Permalink to this token
--rh-color-red-orange-30
Full CSS Variable Permalink to this token
--rh-color-red-orange-50
Full CSS Variable Permalink to this token
--rh-color-red-orange-60
Full CSS Variable Permalink to this token
--rh-color-red-orange-70
Full CSS Variable Permalink to this token
--rh-color-surface-dark-alt
Full CSS Variable Permalink to this token
--rh-color-surface-darkest
Full CSS Variable Permalink to this token
--rh-color-surface-lightest
Full CSS Variable Permalink to this token
--rh-color-white
Full CSS Variable Permalink to this token
--rh-color-yellow-10
Full CSS Variable Permalink to this token
--rh-color-yellow-30
Full CSS Variable Permalink to this token
--rh-color-yellow-50
Full CSS Variable Permalink to this token
--rh-color-yellow-70
Full CSS Variable Permalink to this token
--rh-font-family-code
Full CSS Variable Permalink to this token
--rh-font-size-body-text-md
Full CSS Variable Permalink to this token
--rh-font-size-body-text-xl
Full CSS Variable Permalink to this token
--rh-font-weight-code-medium
Full CSS Variable Permalink to this token
--rh-length-xs
Full CSS Variable Permalink to this token
--rh-space-2xl
Full CSS Variable Permalink to this token
--rh-space-lg
Full CSS Variable Permalink to this token
--rh-space-xl
Full CSS Variable Permalink to this token