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.
Slots
| Slot Name | Summary | Description |
|---|---|---|
loading-text
|
Text to display while loading the status defaults to "Loading" |
Attributes
None
Methods
None
Events
None
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-space-lg
|
16px spacer |
|
--rh-color-surface-status-success
|
|
|
--rh-color-surface-status-warning
|
|
|
--rh-color-surface-status-danger
|
|
|
--rh-color-surface-light
|
Secondary surface (light theme) |
|
--rh-color-surface-dark
|
Tertiary surface (dark theme) |
|
--rh-font-size-body-text-sm
|
14px font size |
|
--rh-space-md
|
8px spacer |
|
--rh-color-text-primary
|
|
|
--rh-border-width-md
|
2px border width: Example: Alert |
|
--rh-color-border-interactive
|
|
|
--rh-border-radius-default
|
3px border radius; Example: Card |
|
--rh-size-icon-01
|
16px icon box |
|
--rh-color-white
|
Lightest surface (light theme) or primary text (dark theme) |
|
--rh-color-status-success
|
|
|
--rh-color-status-warning
|
|
|
--rh-color-status-danger
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
