Avatars are used to identify a user. Since we currently don't support uploading an image, avatars are limited to the user's first and last initials. If the user does not have a name, default to using the anonymous icon shown below. Each avatar should also receive one of forty colors.
<div class="ui-avatar [modifier class]">
<div class="ui-avatar__image" style="background-image: url('http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50');"></div>
<span class="ui-avatar__initials">AL</span>
</div>
<div class="ui-avatar [modifier class]">
<span class="ui-avatar__initials">AL</span>
</div>
<div class="ui-avatar [modifier class]">
<span class="ui-avatar__anonymous-icon icon-user-1"></span>
</div>
<!-- do the right thing when an image is borked -->
<div class="ui-avatar [modifier class]" style="background-image: url('http://www.gravatar/avatar/205e460b479e2e5b48aec07710c08d50');">
<span class="ui-avatar__initials">AL</span>
</div>Combines user avatar and name for great justice.
<div class="ui-user-placard">
<div class="ui-avatar [modifier class]">
<span class="ui-avatar__anonymous-icon icon-user-1"></span>
</div>
<strong class="ui-user-placard__name">Andrew Liebchen</strong>
</div>
<!-- Multi-line user info. Only with use of default avatar size -->
<div class="ui-user-placard">
<div class="ui-avatar small">
<span class="ui-avatar__anonymous-icon icon-user-1"></span>
</div>
<div class="ui-user-placard__body">
<strong>Andrew Liebchen</strong>
<small>Designer</small>
</div>
</div>