Avatar

Default layout

<div class="avatar">
    <figure class="avatar-fig rounded-circle">
        <img src="https://picsum.photos/40/40?image=500" alt="">
    </figure>
    <a href="#" class="avatar-label">Killmonger <span>@killmonger</span></a>
    <div class="avatar-primary-block">
        <span>Uncollected</span>
        <a href="#">22k followers</a>
        <a href="#">1k following</a>
    </div>
    <div class="avatar-secondary-block">
        last seen 43 min ago
    </div>
</div>

Avatar image squared

<div class="avatar">
    <figure class="avatar-fig rounded">
        <img src="https://picsum.photos/40/40?image=500" alt="">
    </figure>
    <a href="#" class="avatar-label">Killmonger <span>@killmonger</span></a>
    <div class="avatar-primary-block">
        <span>Uncollected</span>
        <a href="#">22k followers</a>
        <a href="#">1k following</a>
    </div>
    <div class="avatar-secondary-block">
        last seen 43 min ago
    </div>
</div>

Small

<div class="avatar avatar-small">
    <figure class="avatar-fig rounded">
        <img src="https://picsum.photos/40/40?image=500" alt="">
    </figure>
    <a href="#" class="avatar-label">Killmonger <span>@killmonger</span></a>
</div>

SASS

Reference from _avatar.scss

$avatar-default-size: rem(40) !default;
$avatar-small-size: rem(30) !default;
$avatar-label-color: map-get($colors, black) !default;