Avatar

Examples for the ss-c-avatar module.

Default

SP
HTML 
<span class="ss-c-avatar">SP</span>

Sizes

XS SM MD LG XL
HTML 
<span class="ss-c-avatar ss-c-avatar--xs">XS</span>
        <span class="ss-c-avatar ss-c-avatar--sm">SM</span>
        <span class="ss-c-avatar ss-c-avatar--md">MD</span>
        <span class="ss-c-avatar ss-c-avatar--lg">LG</span>
        <span class="ss-c-avatar ss-c-avatar--xl">XL</span>

With ring

A
HTML 
<span class="ss-c-avatar ss-c-avatar--ring">A</span>

Online / Offline

B C
HTML 
<span class="ss-c-avatar ss-c-avatar--online">B</span>
        <span class="ss-c-avatar ss-c-avatar--offline">C</span>

Placeholder

SP
HTML 
<span class="ss-c-avatar ss-c-avatar--placeholder">SP</span>

Group

A B C
HTML 
<span class="ss-c-avatar-group">
            <span class="ss-c-avatar">A</span>
            <span class="ss-c-avatar">B</span>
            <span class="ss-c-avatar">C</span>
        </span>