#Avatars
The avatar
class is a great way to display images as part of other components.
The avatar
class is a great way to display images as part of other components.
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>
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>
As with many other components in Cirrus, avatar
comes with 4 other size modifiers including avatar--xsmall
, avatar--small
, avatar--large
, and avatar--xlarge
.
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--xsmall" 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--small" 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--large" 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--xlarge" 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--xsmall"><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--small"><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--large"><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--xlarge"><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>