Tangible Pattern Library

Avatar 

<div class="c-avatar">
    <img class="c-avatar__image" src="/images/antonio-avatar.jpg" srcset="/images/antonio-avatar.jpg" sizes="100vw" alt="John Doe" />
</div>
 
<div class="c-avatar{% if modifier is defined %} {{ modifier }}{% endif %}">
  <img class="c-avatar__image"
        src="{{ avatarImage.src|default("") }}"
        srcset="{{ avatarImage.srcset|default("") }}"
        sizes="100vw"
        alt="{{ avatarImage.alt|default("") }}" />
</div>
 
{
  "avatarImage": {
    "src": "/images/antonio-avatar.jpg",
    "srcset": "/images/antonio-avatar.jpg",
    "alt": "John Doe"
  }
}
  • Content: 
    .c-avatar__image {
  width: remify(80px);
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top center;
}
  • URL: /components/raw/avatar/_avatar.scss
  • Filesystem Path: src/pattern-library/02-components/avatar/_avatar.scss
  • Size: 116 Bytes

No notes defined.