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.3.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.3.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.3.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.3.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.3.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.3.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