There is a newer version of Luda.

Let's go!

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.

avatar

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.

avatar

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.

avatar

Olivia Johnson

2018/01/02 12:00

avatar

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.

avatar

Olivia Johnson

2018/01/02 12:00

avatar

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

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