Version 0.40.0

UI Atoms

Avatar

User avatar

atoms/icons/commons/user
atoms/icons/commons/user
atoms/icons/commons/user
atoms/icons/commons/user
atoms/icons/commons/locked
atoms/icons/commons/locked
atoms/icons/commons/locked
atoms/icons/commons/locked
<div class="sui-a-avatar as--sm">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--lg">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--xl">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--sm">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--lg">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--xl">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--sm as--locked">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--locked">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--lg as--locked">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--xl as--locked">
    <i class="sui-a-icon">...</i>
</div>

User with "you" tag

atoms/icons/commons/user
atoms/icons/commons/user
atoms/icons/commons/user
atoms/icons/commons/user
<div class="sui-a-avatar as--sm as--you">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--you">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--lg as--you">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--xl as--you">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--sm as--you">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--you">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--lg as--you">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--xl as--you">
    <i class="sui-a-icon">...</i>
</div>

Group avatar

TAG
TAG
TAG
TAG
atoms/icons/commons/users
atoms/icons/commons/users
atoms/icons/commons/users
atoms/icons/commons/users
atoms/icons/commons/locked
atoms/icons/commons/locked
atoms/icons/commons/locked
atoms/icons/commons/locked
<div class="sui-a-avatar as--sm as--group">
    <span>TAG</span>
</div>

<div class="sui-a-avatar as--group">
    <span>TAG</span>
</div>

<div class="sui-a-avatar as--lg as--group">
    <span>TAG</span>
</div>

<div class="sui-a-avatar as--xl as--group">
    <span>TAG</span>
</div>

<div class="sui-a-avatar as--sm as--group">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--group">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--lg as--group">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--xl as--group">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--sm as--locked as--group">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--locked as--group">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--lg as--locked as--group">
    <i class="sui-a-icon">...</i>
</div>

<div class="sui-a-avatar as--xl as--locked as--group">
    <i class="sui-a-icon">...</i>
</div>

Stacked avatar

atoms/icons/commons/users
<div class="sui-a-avatar as--stacked">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--stacked">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--stacked">
    <i class="sui-a-icon">...</i>
</div>
atoms/icons/commons/users
<div class="sui-a-avatar as--stacked as--dark">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--stacked as--dark">
    <img src="..." alt="" />
</div>

<div class="sui-a-avatar as--stacked as--dark">
    <i class="sui-a-icon">...</i>
</div>