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

$avatar-default-size: rem(40) !default;
$avatar-small-size: rem(30) !default;

:root {
    --r-avatar-default-size: #{$avatar-default-size};
    --r-avatar-small-size: #{$avatar-small-size};
    --r-avatar-label-color: var(--r-color-black);
    --r-avatar-label-hover-color: var(--r-color-dark-lighten-20);    
}