Status indicators

Communicate outage information from Statuspage in realtime anywhere in your help center.

By default, system status information will be presented within a link which, when clicked, takes the visitor to your Statuspage. These patterns can be used anywhere in the help center.

System status in a link
View code
<div data-element="system-status" data-template="system-status"></div>

<template id="tmpl-system-status">
  <% if (indicator) { %>
    <a class="nav-link inline-flex align-items-center" href="https://<%= subdomain %>.statuspage.io" target="_blank">
      <% if (indicator === "critical") { %><span class="w-3 h-3 bg-red-500 circle"></span><% } %>
      <% if (indicator === "major") { %><span class="w-3 h-3 bg-orange-500 circle"></span><% } %>
      <% if (indicator === "minor") { %><span class="w-3 h-3 bg-orange-500 circle"></span><% } %>
      <% if (indicator === "none") { %><span class="w-3 h-3 bg-green-500 circle"></span><% } %>
      <% if (["critical", "major", "minor", "none"].indexOf(indicator) === -1) { %><span class="w-3 h-3 bg-gray-500 circle"></span><% } %>
      <span class="ml-3"><%= description %></span>
    </a>
  <% } %>
</template>

The pattern below presents system status information in a simple clickable badge could be placed discretely on internal pages. Using conditional logic in the micro-template you can choose to have the badge only appear for certain statuses.

System status in a badge
View code
<div data-element="system-status" data-template="system-status"></div>

<template id="tmpl-system-status">
  <% if (indicator) { %>
    <a class="badge inline-flex align-items-center py-2 px-3 font-size-sm rounded" href="https://<%= subdomain %>.statuspage.io" target="_blank">
      <% if (indicator === "critical") { %><span class="w-2 h-2 bg-red-500 circle"></span><% } %>
      <% if (indicator === "major") { %><span class="w-2 h-2 bg-orange-500 circle"></span><% } %>
      <% if (indicator === "minor") { %><span class="w-2 h-2 bg-orange-500 circle"></span><% } %>
      <% if (indicator === "none") { %><span class="w-2 h-2 bg-green-500 circle"></span><% } %>
      <% if (["critical", "major", "minor", "none"].indexOf(indicator) === -1) { %><span class="w-2 h-2 bg-gray-500 circle"></span><% } %>
      <span class="ml-2"><%= description %></span>
    </a>
  <% } %>
</template>

A notification bar could be used to highlight important outage information.

System status in a badge
View code
<div data-element="system-status" data-template="system-status"></div>

<template id="tmpl-system-status">
  <% if (indicator) { %>
    <% var getColor = function(status) {
      if (status === "critical") return 'red-500';
      if (status === "major") return 'orange-500';
      if (status === "minor") return 'orange-500';
      if (status === "none") return 'green-500';
      return 'gray-500';
    } %>
    <div class="relative p-4 text-white bg-<%= getColor(indicator) %> border-radius">
      <div class="flex align-items-center">
        <svg class="svg-icon fill-current bottom-0 font-size-4xl mr-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <g stroke="none" stroke-width="1" fill-rule="evenodd">
            <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
            <path d="M11.1669899,4.49941818 L2.82535718,19.5143571 C2.557144,19.9971408 2.7310878,20.6059441 3.21387153,20.8741573 C3.36242953,20.9566895 3.52957021,21 3.69951446,21 L21.2169432,21 C21.7692279,21 22.2169432,20.5522847 22.2169432,20 C22.2169432,19.8159952 22.1661743,19.6355579 22.070225,19.47855 L12.894429,4.4636111 C12.6064401,3.99235656 11.9909517,3.84379039 11.5196972,4.13177928 C11.3723594,4.22181902 11.2508468,4.34847583 11.1669899,4.49941818 Z" opacity="0.3"></path>
            <rect x="11" y="9" width="2" height="7" rx="1"></rect>
            <rect x="11" y="17" width="2" height="2" rx="1"></rect>
          </g>
        </svg>
        <div class="font-medium mr-auto">
          <h4 class="text-inherit mt-0 mb-1">
            <%= description %>
          </h4>
          <p class="mb-0">
            For more information and to subscribe to updates <a class="underline text-inherit hover:text-inherit" href="https://<%= subdomain %>.statuspage.io" target="_blank">view our Statuspage</a>.
          </p>
        </div>
      </div>
    </div>
  <% } %>
</template>

The status indicator patterns are custom micro-templates that you can use with our System Status extension.

To automatically display live status information from Statuspage anywhere in your help center simply copy-and-paste the code of your chosen pattern into a page template. The status indicator itself will appear wherever you place the element with the data-element="system-status attribute:

<div data-element="system-status" data-template="system-status"></div>

The System Status extension is included for free with all of our themes but must be installed before it can be used. For installation and detailed usage information, refer to the System Status extension page.

Related patterns