#Avatars
The avatar class is a great way to display images as part of other components.
#Avatars With Images
The typical way to use avatars is to embed an image within them.
<div class="avatar"><img src="..." alt="avatar"></div>
<div class="avatar"><img src="..." alt="avatar"></div>
<div class="avatar"><img src="..." alt="avatar"></div>
<div class="avatar"><img src="..." alt="avatar"></div>
<div class="avatar"><img src="..." alt="avatar"></div>#Avatars With Text
Alternatively, you can specify text to be displayed inside the avatar itself. This is similar to what you see in Gmail.
<div class="avatar text-gray-000" data-text='Aa'></div>
<div class="avatar text-gray-000" data-text='Bb'></div>
<div class="avatar text-gray-000" data-text='Cc'></div>#Avatars Sizes
As with many other components in Cirrus, avatar comes with 4 other size modifiers including avatar--xs, avatar--sm, avatar--lg, and avatar--xl.
The example below shows how avatars can be used with tiles.
Jenelle Zaynab
Jenelle Zaynab
Jenelle Zaynab
Jenelle Zaynab
Jenelle Zaynab
Nathan Dumlao
Nathan Dumlao
Nathan Dumlao
Nathan Dumlao
Nathan Dumlao
<div class="row">
<div class="col-6">
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar avatar--xs" data-text="Jz"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Jenelle Zaynab</p>
<p class="tile__subtitle m-0"><a href="!#">@jenelle_zaynab</a></p>
</div>
</div>
<div class="space"></div>
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar avatar--sm" data-text="Jz" style="background: rgb(163, 211, 156);"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Jenelle Zaynab</p>
<p class="tile__subtitle m-0"><a href="!#">@jenelle_zaynab</a></p>
</div>
</div>
<div class="space"></div>
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar" data-text="Jz" style="background: rgb(122, 204, 200);"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Jenelle Zaynab</p>
<p class="tile__subtitle m-0"><a href="!#">@jenelle_zaynab</a></p>
</div>
</div>
<div class="space"></div>
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar avatar--lg" data-text="Jz" style="background: rgb(74, 170, 165);"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Jenelle Zaynab</p>
<p class="tile__subtitle m-0"><a href="!#">@jenelle_zaynab</a></p>
</div>
</div>
<div class="space"></div>
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar avatar--xl" data-text="Jz" style="background: rgb(53, 64, 79);"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Jenelle Zaynab</p>
<p class="tile__subtitle m-0"><a href="!#">@jenelle_zaynab</a></p>
</div>
</div>
</div>
<div class="col-6">
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar avatar--xs"><img src="https://images.unsplash.com/profile-1495427732560-fe5248ad6638?dpr=1&auto=format&fit=crop&w=64&h=64&q=60&cs=tinysrgb&crop=faces&bg=fff"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Nathan Dumlao</p>
<p class="tile__subtitle m-0"><a href="!#">@nate_dumlao</a></p>
</div>
</div>
<div class="space"></div>
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar avatar--sm"><img src="https://images.unsplash.com/profile-1495427732560-fe5248ad6638?dpr=1&auto=format&fit=crop&w=64&h=64&q=60&cs=tinysrgb&crop=faces&bg=fff"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Nathan Dumlao</p>
<p class="tile__subtitle m-0"><a href="!#">@nate_dumlao</a></p>
</div>
</div>
<div class="space"></div>
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar"><img src="https://images.unsplash.com/profile-1495427732560-fe5248ad6638?dpr=1&auto=format&fit=crop&w=256&h=256&q=60&cs=tinysrgb&crop=faces&bg=fff"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Nathan Dumlao</p>
<p class="tile__subtitle m-0"><a href="!#">@nate_dumlao</a></p>
</div>
</div>
<div class="space"></div>
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar avatar--lg"><img src="https://images.unsplash.com/profile-1495427732560-fe5248ad6638?dpr=1&auto=format&fit=crop&w=256&h=256&q=60&cs=tinysrgb&crop=faces&bg=fff"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Nathan Dumlao</p>
<p class="tile__subtitle m-0"><a href="!#">@nate_dumlao</a></p>
</div>
</div>
<div class="space"></div>
<div class="tile m-0 level">
<div class="tile__icon">
<figure class="avatar avatar--xl"><img src="https://images.unsplash.com/profile-1495427732560-fe5248ad6638?dpr=1&auto=format&fit=crop&w=256&h=256&q=60&cs=tinysrgb&crop=faces&bg=fff"></figure>
</div>
<div class="tile__container">
<p class="tile__title m-0">Nathan Dumlao</p>
<p class="tile__subtitle m-0"><a href="!#">@nate_dumlao</a></p>
</div>
</div>
</div>
</div>