Avatar

<div>
    <div class="avatar avatar--base"><a class="avatar__link" href="#author-bio"><img class="avatar__image" itemprop="photo" src="../../assets/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/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/heribert.jpg" alt="Portrait von Heribert Innoq"></a>
    </div>
</div>
<div>
    <div class="avatar avatar--base">
        <a class="avatar__link" href="#author-bio">
            <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/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/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/heribert.jpg")} alt="Portrait von Heribert Innoq" />
        </a>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    .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: 767 Bytes

There are no notes for this item.