Site status
Importing
Add rh-site-status to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-site-status/rh-site-status.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-site-status></rh-site-status>
<script type="module">
import '@rhds/elements/rh-site-status/rh-site-status.js';
</script>rh-site-status
Website status communicates the operational status of a website or domain using a status icon and link. It is usually located in the Footer component.
| Slot Name | Description |
|---|---|
|
loading-text - Text to display while loading the status defaults to "Loading" |
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-border-width-md
|
|
--rh-color-border-interactive
|
|
--rh-color-status-danger
|
|
--rh-color-status-success
|
|
--rh-color-status-warning
|
|
--rh-color-surface-dark
|
|
--rh-color-surface-light
|
|
--rh-color-text-primary
|
|
--rh-color-white
|
|
--rh-font-size-body-text-sm
|
|
--rh-size-icon-01
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
