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 {
  display: inline-block;
}

.avatar__image {
  border-radius: 100%;
  background-color: $avatar-default-bg-color; // Show default background on
  // FIXME: filter: grayscale(100%);
  // Filter sorgt dafür, dass icon überdeckt wird. z-index und translatez helfen nicht.

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

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

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

.avatar__link {
  @extend %link-unstyled;
  transform: translateZ(100);
}

//
// Breakpoints
//
@media screen and (min-width: $grid-breakpoint-md) {
  .avatar__image {
    .avatar--sm &,
    .avatar--small & {
      width: $avatar-size-md;
    }
  }
}
  • URL: /components/raw/avatar/_avatar.scss
  • Filesystem Path: components/01-atoms/media/avatar/_avatar.scss
  • Size: 949 Bytes

No notes defined.