<!-- Default -->
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
</div>
</div>
<!-- Has Image -->
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
</div>
</div>
<!-- Has Name -->
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Madaline Gibson</p>
</div>
</div>
<!-- Has Name Text -->
<div class="avatar-wrapper avatar-wrapper-has-text">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Vicenta Maggio</p>
<p class="avatar__text">Services: Beard Tinting, Head Shave</p>
</div>
</div>
<!-- Has Image -->
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
<div class="avatar__indicator avatar__indicator--is-online"></div>
</div>
</div>
<!-- Has Name -->
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
<div class="avatar__indicator avatar__indicator--is-online"></div>
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Madaline Gibson</p>
</div>
</div>
<!-- Has Name Text -->
<div class="avatar-wrapper avatar-wrapper-has-text">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
<div class="avatar__indicator avatar__indicator--is-online"></div>
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Vicenta Maggio</p>
<p class="avatar__text">Services: Beard Tinting, Head Shave</p>
</div>
</div>
<!-- Has Image -->
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
<div class="avatar__indicator"></div>
</div>
</div>
<!-- Has Name -->
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
<div class="avatar__indicator"></div>
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Madaline Gibson</p>
</div>
</div>
<!-- Has Name Text -->
<div class="avatar-wrapper avatar-wrapper-has-text">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
<div class="avatar__indicator"></div>
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Vicenta Maggio</p>
<p class="avatar__text">Services: Beard Tinting, Head Shave</p>
</div>
</div>
<!-- Has Name Vert -->
<div class="avatar-wrapper avatar-wrapper-vertical">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
<div class="avatar__indicator"></div>
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Madaline Gibson</p>
</div>
</div>
<!-- Has Name Text Vert -->
<div class="avatar-wrapper avatar-wrapper-has-text avatar-wrapper-vertical">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
<div class="avatar__indicator"></div>
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Vicenta Maggio</p>
<p class="avatar__text">Services: Beard Tinting, Head Shave</p>
</div>
</div>
<!-- Large -->
<div class="avatar-wrapper avatar-wrapper-large">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="96" height="96" />
<div class="avatar__indicator"></div>
</div>
</div>
<!-- Large Name -->
<div class="avatar-wrapper avatar-wrapper-large avatar-wrapper-vertical">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="96" height="96" />
<div class="avatar__indicator"></div>
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Vicenta Maggio</p>
</div>
</div>
<!-- Large Name Text -->
<div class="avatar-wrapper avatar-wrapper-large avatar-wrapper-has-text avatar-wrapper-vertical">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="96" height="96" />
<div class="avatar__indicator"></div>
</div>
<div class="avatar__text-wrapper">
<p class="avatar__name">Vicenta Maggio</p>
<p class="avatar__text">Services: Beard Tinting, Head Shave</p>
</div>
</div>
<div class="avatar-wrapper{{#if isLarge}} avatar-wrapper-large{{/if}}{{#if text}} avatar-wrapper-has-text{{/if}}{{#if isVertical}} avatar-wrapper-vertical{{/if}}">
<div class="avatar__image-wrapper">
<img class="avatar" src={{image}} alt={{alt}} {{#if isLarge}}width="96" height="96"{{else}}width="{{#if width}}{{width}}{{else}}40{{/if}}" height="{{#if height}}{{height}}{{else}}40{{/if}}"{{/if}} />
{{#if showIndicator}}
<div class="avatar__indicator{{#if isOnline}} avatar__indicator--is-online{{/if}}"></div>
{{/if}}
</div>
{{#if name}}
<div class="avatar__text-wrapper">
<p class="avatar__name">{{name}}</p>
{{#if text}}
<p class="avatar__text">{{text}}</p>
{{/if}}
</div>
{{/if}}
</div>
/* Default */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80"
}
/* Has Image */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80"
}
/* Has Name */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Madaline Gibson"
}
/* Has Name Text */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Vicenta Maggio",
"text": "Services: Beard Tinting, Head Shave"
}
/* Has Image */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"showIndicator": true,
"isOnline": true
}
/* Has Name */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Madaline Gibson",
"showIndicator": true,
"isOnline": true
}
/* Has Name Text */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Vicenta Maggio",
"text": "Services: Beard Tinting, Head Shave",
"showIndicator": true,
"isOnline": true
}
/* Has Image */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"showIndicator": true
}
/* Has Name */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Madaline Gibson",
"showIndicator": true
}
/* Has Name Text */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Vicenta Maggio",
"text": "Services: Beard Tinting, Head Shave",
"showIndicator": true
}
/* Has Name Vert */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Madaline Gibson",
"showIndicator": true,
"isVertical": true
}
/* Has Name Text Vert */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Vicenta Maggio",
"text": "Services: Beard Tinting, Head Shave",
"showIndicator": true,
"isVertical": true
}
/* Large */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"showIndicator": true,
"isLarge": true
}
/* Large Name */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Vicenta Maggio",
"showIndicator": true,
"isVertical": true,
"isLarge": true
}
/* Large Name Text */
{
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"name": "Vicenta Maggio",
"text": "Services: Beard Tinting, Head Shave",
"showIndicator": true,
"isVertical": true,
"isLarge": true
}
Avatars represent users. They may include a status indicator as well as name and a line of text.
Use Avatars to represent users.