Skip to content
STYLESCAPE

Indicator

Examples for the ss-c-indicator module, including the ss-c-status-dot and ss-c-status-bar parts. A dot only repeats what its text label says, so keep the label and hide the dot from assistive technology.

Badge corner

9+
HTML 
<span class="ss-c-indicator">
            <span class="ss-c-indicator__item ss-c-badge ss-c-badge--error">9+</span>
            <button type="button" class="ss-c-button">Inbox</button>
        </span>

Positions

TS TE BS BE
HTML 
<span class="ss-c-indicator">
            <span class="ss-c-indicator__item ss-c-indicator__item--top-start ss-c-badge">TS</span>
            <span class="ss-c-indicator__item ss-c-indicator__item--top-end ss-c-badge">TE</span>
            <span class="ss-c-indicator__item ss-c-indicator__item--bottom-start ss-c-badge">BS</span>
            <span class="ss-c-indicator__item ss-c-indicator__item--bottom-end ss-c-badge">BE</span>
            <button type="button" class="ss-c-button" style="min-width: 12em; min-height: 6em">Container</button>
        </span>

Status dot

  • Online
  • Degraded
  • Offline
  • Syncing
  • Paused
  • Not checked
  • Live
  • Small
  • Large
HTML 
<ul style="display: flex; gap: 1.5rem; list-style: none; padding: 0; flex-wrap: wrap">
            <li><span class="ss-c-status-dot ss-c-status-dot--success" aria-hidden="true"></span> Online</li>
            <li><span class="ss-c-status-dot ss-c-status-dot--warning" aria-hidden="true"></span> Degraded</li>
            <li><span class="ss-c-status-dot ss-c-status-dot--error" aria-hidden="true"></span> Offline</li>
            <li><span class="ss-c-status-dot ss-c-status-dot--info" aria-hidden="true"></span> Syncing</li>
            <li><span class="ss-c-status-dot ss-c-status-dot--muted" aria-hidden="true"></span> Paused</li>
            <li><span class="ss-c-status-dot ss-c-status-dot--unknown" aria-hidden="true"></span> Not checked</li>
            <li><span class="ss-c-status-dot ss-c-status-dot--success ss-c-status-dot--pulse" aria-hidden="true"></span> Live</li>
            <li><span class="ss-c-status-dot ss-c-status-dot--sm ss-c-status-dot--success" aria-hidden="true"></span> Small</li>
            <li><span class="ss-c-status-dot ss-c-status-dot--lg ss-c-status-dot--success" aria-hidden="true"></span> Large</li>
        </ul>

Status bar

Connected 3 peers Latency 38 ms Ln 12, Col 4 UTF-8
HTML 
<footer class="ss-c-status-bar" aria-label="Connection status">
            <span class="ss-c-status-bar__item" role="status"><span class="ss-c-status-dot ss-c-status-dot--success ss-c-status-dot--pulse" aria-hidden="true"></span>Connected</span>
            <span class="ss-c-status-bar__item">3 peers</span>
            <span class="ss-c-status-bar__item">Latency 38 ms</span>
            <span class="ss-c-status-bar__item ss-c-status-bar__spacer">Ln 12, Col 4</span>
            <span class="ss-c-status-bar__item">UTF-8</span>
        </footer>