BHDicaire

Site status

Content

The site-status component pairs a visible operational state with a link to its approved status source. It renders caller-supplied state; fetching or interpreting monitoring data remains the host’s responsibility.

Example#

BHDicaire.com Operational

When to use#

  • Place it in the footer when an approved status source can supply the state
  • Use one indicator per page for the site-wide operational state
  • Not for page-level notices — use a callout in the page body

Implementation#

{{ partial "site-status.html" (dict
  "href" "https://status.example.com"
  "label" "BHDicaire.com"
  "state" "operational"
  "statusText" "Operational"
) }}

The partial accepts operational, degraded, outage, maintenance, or unknown. Each state receives a scoped modifier class, while the visible text carries the meaning. Markdown pages use the site-status shortcode.

Options#

OptionPurpose
hrefRequired link to the approved status source
labelRequired visible name for the site or service
stateRequired supported state used for the indicator style
statusTextRequired localized text that names the current state

Interface manifest

Kind
Component
Category
Content
Status
Implemented
Implementation
Partial:layouts/partials/site-status.htmlShortcode:layouts/shortcodes/site-status.htmlCSS:assets/css/site.css
Related interfaces
Site status

Accessibility#

  • The complete indicator is a native link, reachable with Tab and activated with Enter
  • The visible text names the state, so meaning does not depend on the indicator colour
  • The state text uses role="status" and aria-atomic="true"; changing its text is announced politely without moving focus
  • Callers must update both state and statusText when the approved source changes