Health index

Overview Style Guidelines Code Demos Accessibility
  1. rh-health-index
  1. rh-health-index

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-health-index/rh-health-index.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-health-index/rh-health-index.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-health-index/rh-health-index.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-health-index/rh-health-index.js": "./elements/rh-health-index/rh-health-index.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/controllers/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@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/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

rh-health-index

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