---

HTML Code (Demo)

<ul style="--avatar-count: 2" class="avatar-list">
  <li>
    <a href="#" style="--background-blend-color: var(--color-green-500)">
      <img src="/assets/images/avatar/martina_scholz-bw.jpg" alt="Martina Scholz" class="avatar-image-front">
      <img src="/assets/images/avatar/avatar-martina-scholz.png" alt="Martina Scholz" class="avatar-image-back">
    </a>
    <span class="avatar-name">Martina Scholz</span>
  </li>
  <li>
    <a href="#" style="--background-blend-color: var(--color-yellow-600)">
      <img src="/assets/images/avatar/benjamin-trenkle.jpg" alt="Benjamin Trenkle" class="avatar-image-front">
      <img src="/assets/images/avatar/wicked-chick.png" alt="Benjamin Trenkle" class="avatar-image-back">
    </a>
    <span class="avatar-name">Benjamin Trenkle</span>
  </li>
</ul>

---

Configuration

Component Config: Teasers/avatar/avatar.config.js

{
  "type": "list",
  "avatars": [
    {
      "image": "/assets/images/avatar/martina_scholz-bw.jpg",
      "image2": "/assets/images/avatar/avatar-martina-scholz.png",
      "name": "Martina Scholz",
      "link": "#",
      "modifier": "avatar-image-front",
      "modifier2": "avatar-image-back",
      "backgroundBlendColor": "var(--color-green-500)"
    },
    {
      "image": "/assets/images/avatar/benjamin-trenkle.jpg",
      "image2": "/assets/images/avatar/wicked-chick.png",
      "name": "Benjamin Trenkle",
      "link": "#",
      "modifier": "avatar-image-front",
      "modifier2": "avatar-image-back",
      "backgroundBlendColor": "var(--color-yellow-600)"
    }
  ]
}