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.1.x/assets/img/avatar.jpg">
  </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.1.x/assets/img/avatar.jpg">
  </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

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.1.x/assets/img/avatar.jpg">
  </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.1.x/assets/img/avatar.jpg">
  </figure>
  <div class="avatar-info">
    <p class="avatar-name">Olivia Johnson</p>
    <p class="avatar-description">2018/01/02 12:00</p>
  </div>
</div>

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.1.x/assets/img/avatar.jpg">
  </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.1.x/assets/img/avatar.jpg">
  </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: 3rem !default

  $avatar-large-image-size-rem: 6rem !default

  $avatar-small-image-size-rem: 2rem !default

  $avatar-info-height-rem: 3rem !default

  $avatar-info-padding-top-rem: 0.3rem !default

  $avatar-info-padding-left-rem: 0.5rem !default

  $avatar-large-info-height-rem: 4rem !default

  $avatar-large-info-padding-top-rem: 0.6rem !default

  $avatar-large-info-padding-left-rem: 1rem !default

  $avatar-small-info-height-rem: null !default

  $avatar-small-info-padding-top-rem: null !default

  $avatar-small-info-padding-left-rem: null !default