Avatar
The avatar component helps identify users (or other entities).
Minimal avatar image component, default version accepts img element as picture.
<a class="flix-avatar" href="#header">
<img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
</a>Size variations
-
flix-avatar--sm
- smaller avatar
-
flix-avatar--lg
- large avatar
-
flix-avatar--xl
- extra large avatar
<a class="flix-avatar flix-avatar--sm" href="#header">
<img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
</a><a class="flix-avatar flix-avatar--lg" href="#header">
<img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
</a><a class="flix-avatar flix-avatar--xl" href="#header">
<img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
</a>Avatar with inline SVG
You can provide an inline SVG instead of <img /> element.
If that's the case you should put the SVG code into flix-avatar__image container and make sure to provide a title to it with contents similar to an img alt text:
<a class="flix-avatar flix-avatar--lg" href="#header">
<div class="flix-avatar__image">
<svg fill="var(--flix-icon-secondary-color)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="flix-icon profile-solid">
<title>Picture of John Doe</title>
<path d="M12 2a10 10 0 0 0-9.94 11.08l.05.32q.04.37.12.73l.09.34q.09.35.2.68l.1.32.28.66.13.28a10 10 0 0 0 .95 1.55l.12.16q.28.36.58.68l.08.09a9.97 9.97 0 0 0 14.48 0l.08-.09q.3-.33.57-.68.07-.07.12-.16a10 10 0 0 0 1.36-2.5l.11-.31q.12-.33.2-.68l.08-.34q.09-.36.13-.73l.05-.32q.05-.54.06-1.08A10 10 0 0 0 12 2m0 4c1.68 0 3.05 1.55 3.05 3.45s-1.37 3.46-3.05 3.46-3.05-1.55-3.05-3.46C8.95 7.55 10.32 6 12 6m0 14a8 8 0 0 1-6.22-2.99 4.9 4.9 0 0 1 3.8-3.22 4.36 4.36 0 0 0 4.84 0 4.9 4.9 0 0 1 3.8 3.22A8 8 0 0 1 12 20"></path>
</svg>
</div>
</a>