Container Avatar - Hamburg Coding School

Usage

When to use

tbd
When to use

tbd
Example

Show code
Lasse Diercks Show profile
Alexander Roddis Show profile
Christoph Eicke Show profile
Frank Mecklenburg Show profile
Lasse Diercks Show profile
Helder Pereira Show profile
Henning Muszynski Show profile
Lasse Diercks Show profile
Teresa Holfeld Show profile
Thomas Hedeler Show profile
            
              <div class="container-avatar">
  <div class="container-avatar__wrapper">
    <div class="container-avatar__circle">
      <div id="avatar-01" class="container-avatar__item">
        <div class="avatar avatar--is-loud avatar--reverse">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-lasse-diercks.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Lasse Diercks</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-02" class="container-avatar__item">
        <div class="avatar avatar--is-loud">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-alexander-roddis.jpg" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Alexander Roddis</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-03" class="container-avatar__item">
        <div class="avatar avatar--is-loud avatar--reverse">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-christoph-eicke.jpg" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Christoph Eicke</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-04" class="container-avatar__item">
        <div class="avatar">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-frank-mecklenburg.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Frank Mecklenburg</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-05" class="container-avatar__item">
        <div class="avatar avatar--is-loud avatar--reverse">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-lasse-diercks.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Lasse Diercks</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-06" class="container-avatar__item">
        <div class="avatar">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-helder-pereira.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Helder Pereira</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-07" class="container-avatar__item">
        <div class="avatar avatar--reverse">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-henning-muszynski.jpg" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Henning Muszynski</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-08" class="container-avatar__item">
        <div class="avatar">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-lasse-diercks.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Lasse Diercks</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
    </div><img class="container-avatar__image" src="/assets/images/hcs-avatar-circle-02.svg" alt="">
  </div>
  <div class="container-avatar__wrapper">
    <div class="container-avatar__circle">
      <div id="avatar-09" class="container-avatar__item">
        <div class="avatar">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-lasse-diercks.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Lasse Diercks</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-10" class="container-avatar__item">
        <div class="avatar">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-lasse-diercks.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Lasse Diercks</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-11" class="container-avatar__item">
        <div class="avatar avatar--is-loud avatar--reverse">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-lasse-diercks.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Lasse Diercks</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-12" class="container-avatar__item">
        <div class="avatar avatar--is-loud avatar--reverse">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-lasse-diercks.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Lasse Diercks</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
    </div><img class="container-avatar__image" src="/assets/images/hcs-avatar-circle-01.svg" alt="">
  </div>
  <div class="container-avatar__wrapper">
    <div class="container-avatar__circle">
      <div id="avatar-13" class="container-avatar__item">
        <div class="avatar avatar--is-loud avatar--reverse">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-lasse-diercks.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Lasse Diercks</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-14" class="container-avatar__item">
        <div class="avatar">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-lasse-diercks.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Lasse Diercks</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-15" class="container-avatar__item">
        <div class="avatar avatar--is-loud avatar--reverse">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-teresa-holfeld.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Teresa Holfeld</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
      <div id="avatar-16" class="container-avatar__item">
        <div class="avatar">
          <div class="avatar__image">
            <img class="avatar__image-asset" src="/assets/images/hcs-teacher-thomas-hedeler.png" alt="">
          </div>
          <div class="avatar__popup">
            <span class="avatar__title">Thomas Hedeler</span> <a class="avatar__link" href="demo-teacher.html">Show profile <svg class="avatar__link-icon" viewbox="0 0 32 32">
            <use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>
          </div>
        </div>
      </div>
    </div><img class="container-avatar__image" src="/assets/images/hcs-avatar-circle-02.svg" alt="">
  </div>
  <div class="container-avatar__wrapper">
    <img class="container-avatar__image" src="/assets/images/hcs-avatar-circle-03.svg" alt="">
  </div>
  <div class="container-avatar__wrapper">
    <img class="container-avatar__image" src="/assets/images/hcs-avatar-circle-04.svg" alt="">
  </div>
</div>
Modifier

Name	Description
`When to use`	tbd