Avatar 

<div class="avatar avatar--xs">
    <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--sm">
    <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--md">
    <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--base">
    <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--xl">
    <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--xxl">
    <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
</div>
 
<div class="avatar avatar--xs">
    <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--sm">
    <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--md">
    <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--base">
    <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--xl">
    <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
</div>

<div class="avatar avatar--xxl">
    <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
</div>
 
/* No context defined. */
  • Content: 
    $avatar-size-xs: ms(10); //~40px
$avatar-size-sm: ms(14); //~55px
$avatar-size-md: ms(18); //~80px
$avatar-size-base: ms(22); //~120px
$avatar-size-xl: ms(29); //r = ~227px
$avatar-size-xxl: ms(34); //r = ~354px

.avatar {
  display: inline-block;
}

.avatar__image {
  background-color: $avatar-default-bg-color; // Show default background on
  border-radius: 100%;

  .avatar--xs & {
    width: $avatar-size-xs;
    height: $avatar-size-xs;
  }

  .avatar--sm & {
    width: $avatar-size-sm;
    height: $avatar-size-sm;
  }

  .avatar--md & {
    width: $avatar-size-md;
    height: $avatar-size-md;
  }

  .avatar--base & {
    width: $avatar-size-base;
    height: $avatar-size-base;
  }

  .avatar--xl & {
    width: $avatar-size-xl;
    height: $avatar-size-xl;
  }

  .avatar--xxl & {
    max-width: $avatar-size-xxl;
    max-height: $avatar-size-xxl;
  }
}
  • URL: /components/raw/avatar/_avatar.scss
  • Filesystem Path: components/05-atoms/media/avatar/_avatar.scss
  • Size: 866 Bytes

No notes defined.