Heartwood

Avatar: 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&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;4c06a1bc6123a9ac6645a269314334b2&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;192&amp;h&#x3D;192&amp;q&#x3D;80
            alt=w idth="96" height="96" />
        <div class="avatar__indicator"></div>
    </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>
 
{
  "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
}

Avatar

Avatars represent users. They may include a status indicator as well as name and a line of text.

When to use:

Use Avatars to represent users.

When not to use:

  • Representing a non-person entity; TBD — use another component