Avatar

<div class="avatar avatar--base">
    <a class="avatar__link" href="#author-bio"><img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" /></a>
</div>
<div class="avatar avatar--small">
    <a class="avatar__link" href="#author-bio"><img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" /></a>
</div>
<div class="avatar avatar--xs">
    <a class="avatar__link" href="#author-bio"><img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" /></a>
</div>
<div class="avatar avatar--base">
    <a class="avatar__link" href="#author-bio">
        <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq" />
    </a>
</div>

<div class="avatar avatar--small">
    <a class="avatar__link" href="#author-bio">
        <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq" />
    </a>
</div>

<div class="avatar avatar--xs">
    <a class="avatar__link" href="#author-bio">
        <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq" />
    </a>
</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 = ~227 px
    
    .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 &,
      .avatar--small & {
        width: $avatar-size-sm;
        height: $avatar-size-sm;
      }
    
      .avatar--md & {
        width: $avatar-size-md;
        height: $avatar-size-md;
      }
    
      .avatar--xl & {
        width: $avatar-size-xl;
        height: $avatar-size-xl;
      }
    
      .avatar--base & {
        width: $avatar-size-base;
        height: $avatar-size-base;
      }
    }
    
    .avatar__link {
      @extend %link-unstyled;
    
      transform: translateZ(100);
    }
    
  • URL: /components/raw/avatar/_avatar.scss
  • Filesystem Path: components/05-atoms/media/avatar/_avatar.scss
  • Size: 833 Bytes

No notes defined.