Avatar
Show an user photo together with necessary user information.
Vertical Avatar
A vertical avatar contains a user photo in the top
and some texts like user name in the bottom.
To create a vertical avatar, add the .avatar-y
class to a container,
then wrap an user photo with the .media
class, wrap user information
with the .avatar-info
class.
Let’s see the below example for clarification.
Olivia Johnson
2018/01/02 12:00
<div class="avatar-y">
<figure class="media">
<img src="/luda/0.2.x/assets/img/avatar.jpg" alt="avatar">
</figure>
<div class="avatar-info">
<p class="avatar-name">Olivia Johnson</p>
<p class="avatar-description">2018/01/02 12:00</p>
</div>
</div>
Horizontal Avatar
If a horizontal avatar is prefered, replace the .avatar-y
class
with the .avatar-x
class.
Olivia Johnson
2018/01/02 12:00
<div class="avatar-x">
<figure class="media">
<img src="/luda/0.2.x/assets/img/avatar.jpg" alt="avatar">
</figure>
<div class="avatar-info">
<p class="avatar-name">Olivia Johnson</p>
<p class="avatar-description">2018/01/02 12:00</p>
</div>
</div>
Style Mofifiers
.avatar-smallModifier
The .avatar-small
class is used to make an avatar smaller.
Olivia Johnson
2018/01/02 12:00
Olivia Johnson
2018/01/02 12:00
<div class="avatar-y avatar-small">
<figure class="media">
<img src="/luda/0.2.x/assets/img/avatar.jpg" alt="avatar">
</figure>
<div class="avatar-info">
<p class="avatar-name">Olivia Johnson</p>
<p class="avatar-description">2018/01/02 12:00</p>
</div>
</div>
<div class="avatar-x avatar-small">
<figure class="media">
<img src="/luda/0.2.x/assets/img/avatar.jpg" alt="avatar">
</figure>
<div class="avatar-info">
<p class="avatar-name">Olivia Johnson</p>
<p class="avatar-description">2018/01/02 12:00</p>
</div>
</div>
.avatar-largeModifier
Oppsitely, the .avatar-lager
class is used to make an avatar larger.
Olivia Johnson
2018/01/02 12:00
Olivia Johnson
2018/01/02 12:00
<div class="avatar-y avatar-large">
<figure class="media">
<img src="/luda/0.2.x/assets/img/avatar.jpg" alt="avatar">
</figure>
<div class="avatar-info">
<p class="avatar-name">Olivia Johnson</p>
<p class="avatar-description">2018/01/02 12:00</p>
</div>
</div>
<div class="avatar-x avatar-large">
<figure class="media">
<img src="/luda/0.2.x/assets/img/avatar.jpg" alt="avatar">
</figure>
<div class="avatar-info">
<p class="avatar-name">Olivia Johnson</p>
<p class="avatar-description">2018/01/02 12:00</p>
</div>
</div>
Sass Variables
Size
$avatar-image-size-rem: baseline(4) !default
$avatar-large-image-size-rem: baseline(5) !default
$avatar-small-image-size-rem: baseline(3) !default
$avatar-info-height-rem: baseline(3) !default
$avatar-info-padding-top-rem: $spacing-tiny-rem !default
$avatar-info-padding-left-rem: $spacing-small-rem !default
$avatar-large-info-height-rem: null !default
$avatar-large-info-padding-top-rem: null !default
$avatar-large-info-padding-left-rem: null !default
$avatar-small-info-height-rem: baseline(3) !default
$avatar-small-info-padding-top-rem: null !default
$avatar-small-info-padding-left-rem: null !default
Typography
$avatar-name-typography-size-level: 6 !default
The value must be an integer between 5 and 8.
$avatar-large-name-typography-size-level: 5 !default
The value must be an integer between 5 and 8.
$avatar-small-name-typography-size-level: 7 !default
The value must be an integer between 5 and 8.
$avatar-description-typography-size-level: 7 !default
The value must be an integer between 5 and 8.
$avatar-large-description-typography-size-level: 6 !default
The value must be an integer between 5 and 8.
$avatar-small-description-typography-size-level: 8 !default
The value must be an integer between 5 and 8.
Others
$avatar-image-border-radius: 100% !default
$avatar-default-image-background-size: 50% auto !default
$avatar-default-image: svg-icon('<svg viewBox="..."><path fill="#fill" d="..."/></svg>', $line-color-muted) !default
The #fill
texts will be replaced automatically by color values,
you don’t need set it.
$avatar-background-color: $background-color-muted !default
$avatar-name-color: $color-muted !default
$avatar-description-color: $avatar-name-color !default