#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.

avatar
avatar
avatar
avatar
avatar
<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--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

@jenelle_zaynab

Jenelle Zaynab

@jenelle_zaynab

Jenelle Zaynab

@jenelle_zaynab

avatar

Nathan Dumlao

@nate_dumlao

avatar

Nathan Dumlao

@nate_dumlao

avatar

Nathan Dumlao

@nate_dumlao

avatar

Nathan Dumlao

@nate_dumlao

avatar

Nathan Dumlao

@nate_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&amp;auto=format&amp;fit=crop&amp;w=64&amp;h=64&amp;q=60&amp;cs=tinysrgb&amp;crop=faces&amp;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&amp;auto=format&amp;fit=crop&amp;w=64&amp;h=64&amp;q=60&amp;cs=tinysrgb&amp;crop=faces&amp;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&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=60&amp;cs=tinysrgb&amp;crop=faces&amp;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&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=60&amp;cs=tinysrgb&amp;crop=faces&amp;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&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=60&amp;cs=tinysrgb&amp;crop=faces&amp;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>