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
| Selector | Description |
|---|---|
flix-avatar--sm | smaller avatar |
flix-avatar--lg | large avatar |
flix-avatar--xl | extra large avatar |
Small avatar (sm)
Normal avatar (default, no modifier needed)
Large avatar (lg)
Extra large avatar (xl)
<h4 class="flix-h4 flix-h4--section-header">Small avatar (sm)</h4>
<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>
<h4 class="flix-h4">Normal avatar (default, no modifier needed)</h4>
<a class="flix-avatar" href="#header">
<img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
</a>
<h4 class="flix-h4">Large avatar (lg)</h4>
<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>
<h4 class="flix-h4">Extra large avatar (xl)</h4>
<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>Large 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 xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96.001">
<title>Picture of John Doe</title>
<g transform="translate(-95 -83.999)">
<g>
<circle cx="48" cy="48" r="48" style="fill:#fff" transform="translate(95 84)"></circle>
<g transform="translate(0 -30)">
<g>
<path d="M-5045.293-4954.053a47.758 47.758 0 0 1-7.21-13.641 47.949 47.949 0 0 1-2.5-15.3 47.7 47.7 0 0 1 3.772-18.684 47.831 47.831 0 0 1 10.287-15.257 47.831 47.831 0 0 1 15.257-10.287A47.7 47.7 0 0 1-5007-5031a47.7 47.7 0 0 1 18.684 3.772 47.831 47.831 0 0 1 15.257 10.287 47.831 47.831 0 0 1 10.287 15.257A47.7 47.7 0 0 1-4959-4983a47.951 47.951 0 0 1-2.4 15.03 47.8 47.8 0 0 1-6.689 13.083 34.37 34.37 0 0 0-18-16.008 4.9 4.9 0 0 0-1.748-.319 5.042 5.042 0 0 0-3.174 1.128 24.264 24.264 0 0 1-7.354 4.148 24.307 24.307 0 0 1-8.1 1.383 24.306 24.306 0 0 1-8.1-1.383 24.264 24.264 0 0 1-7.354-4.148 5.048 5.048 0 0 0-3.164-1.12 5.011 5.011 0 0 0-1.752.315 34.846 34.846 0 0 0-18.461 16.835zm39.08-64.947c-9.867 0-17.894 9.45-17.894 21.064a24.082 24.082 0 0 0 1.41 8.188 21.591 21.591 0 0 0 3.841 6.7 18.042 18.042 0 0 0 5.688 4.521 15.45 15.45 0 0 0 6.954 1.66c9.869 0 17.9-9.45 17.9-21.066s-8.031-21.067-17.9-21.067z" style="fill:#ffcd64" transform="translate(5150 5145)"></path>
<g style="fill:none;stroke:#ffcd64" transform="translate(95 114)">
<circle cx="48" cy="48" r="48" style="stroke:none"></circle>
<circle cx="48" cy="48" r="47.5" style="fill:none"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</a>