An avatar is used to display a circular image, typically a profile picture. It can also contain a title and sub title, usually a name and job function.
<div class="a-avatar ">
<div class="a-image a-avatar__image">
<img class="a-image__visual" src="/assets/images/avatar/erika.jpg" alt="Erika Wyckmans" title="Erika Wyckmans" />
</div>
<div class="a-avatar__content">
<p class="a-avatar__title">Erika Wyckmans</p>
<p class="a-avatar__description">
Functie auteur (1)
-
Functie auteur (2)
</p>
</div>
</div>
<div class="a-avatar a-avatar--large">
<div class="a-image a-avatar__image">
<img class="a-image__visual" src="/assets/images/avatar/erika.jpg" alt="Erika Wyckmans" title="Erika Wyckmans" />
</div>
<div class="a-avatar__content">
<p class="a-avatar__title">Erika Wyckmans</p>
<p class="a-avatar__description">
Functie auteur (1)
-
Functie auteur (2)
</p>
</div>
</div>