Indicator

Examples for the ss-c-indicator module.

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>