Documentation
Basic
Extended
Blocks

Avatar

Default layout

Killmonger @killmonger
Uncollected 22k followers 1k following
last seen 43 min ago 
<div class="avatar">
    <figure class="avatar-fig rounded-circle">
        <img src="https://placehold.co/40x40" 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


Killmonger @killmonger
Uncollected 22k followers 1k following
last seen 43 min ago 
<div class="avatar">
    <figure class="avatar-fig rounded">
        <img src="https://placehold.co/40x40" 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


Killmonger @killmonger 
<div class="avatar avatar-small">
    <figure class="avatar-fig rounded">
        <img src="https://placehold.co/40x40" 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);    
}