Avatar

Provides a graphic representation of an identity and it can display an image, text character or an icon.

Basic usage

By default, avatars require two wrapping elements: .avatar and a .avatar-elem (only for icons and text character). Please provide an alt/title attribute for standalone avatars.

U U

<!-- photos -->
<img src="//design.umbler.com//assets/img/docs/avatar.jpg" class="avatar avatar-3x" alt="Bella" />

<!-- photos with link -->
<a href="javascript:;" class="avatar avatar-3x">
  <img src="//design.umbler.com//assets/img/docs/avatar.jpg" alt="Bella" />
</a>

<!-- letters -->
<span class="avatar avatar-3x bg-emerald">
  <abbr class="avatar-elem" title="Umblerito">U</abbr>
</span>

<!-- letters with link -->
<a href="javascript:;" class="avatar avatar-3x bg-emerald">
  <abbr class="avatar-elem">U</abbr>
</a>

<!-- icons -->
<span class="avatar avatar-3x bg-primary">
  <span class="avatar-elem icon icon-space-rocket"></span>
</span>

Colors

I U M B L E R

<span class="avatar bg-primary avatar-3x">
  <abbr class="avatar-elem" title="Umbler">I</abbr>
</span>
<span class="avatar bg-primary avatar-3x">
  <span class="icon icon-vote-heart avatar-elem" title="Umbler"></span>
</span>
<span class="avatar bg-emerald avatar-3x">
  <abbr class="avatar-elem" title="Umbler">U</abbr>
</span>
<span class="avatar bg-cyan avatar-3x">
  <abbr class="avatar-elem" title="Umbler">M</abbr>
</span>
<span class="avatar bg-purple avatar-3x">
  <abbr class="avatar-elem" title="Umbler">B</abbr>
</span>
<span class="avatar bg-salmon avatar-3x">
  <abbr class="avatar-elem" title="Umbler">L</abbr>
</span>
<span class="avatar bg-azure avatar-3x">
  <abbr class="avatar-elem" title="Umbler">E</abbr>
</span>
<span class="avatar bg-lime avatar-3x">
  <abbr class="avatar-elem" title="Umbler">R</abbr>
</span>

Notifications

Links

Use .avatar-muted.

<!-- normal -->
<span class="tag-status-block">
  <span class="tag-status tag-status-danger"></span>
  <a href="javascript:;" class="avatar" data-toggle="tooltip" data-placement="top" title="Bella">
    <img src="//design.umbler.com//assets/img/docs/avatar.jpg" alt="Bella" />
  </a>
</span>

<!-- muted -->
<span class="tag-status-block">
  <span class="tag-status tag-status-danger"></span>
  <a class="avatar avatar-muted" data-toggle="tooltip" data-placement="top" title="Bella">
    <img src="//design.umbler.com//assets/img/docs/avatar.jpg" alt="Bella" />
  </a>
</span>

Sizes

Add .avatar-{3x|4x|5x} for differents image sizes.

<span class="tag-status-block">
  <span class="tag-status tag-status-success"></span>
  <img src="//design.umbler.com//assets/img/docs/avatar.jpg" class="avatar" alt="Bella" />
</span>
<span class="tag-status-block">
  <span class="tag-status tag-status-warning"></span>
  <img src="//design.umbler.com//assets/img/docs/avatar.jpg" class="avatar avatar-3x" alt="Bella" />
</span>
<span class="tag-status-block">
  <span class="tag-status tag-status-danger"></span>
  <img src="//design.umbler.com//assets/img/docs/avatar.jpg" class="avatar avatar-4x" alt="Bella" />
</span>
<span class="tag-status-block">
  <span class="tag-status tag-status-warning"></span>
  <img src="//design.umbler.com//assets/img/docs/avatar.jpg" class="avatar avatar-5x" alt="Bella" />
</span>

Decks

Use .avatar-deck for avatar list.

Links

<div class="avatar-deck">
  <a href="javascript:;" class="avatar bg-emerald" data-toggle="tooltip" data-placement="top" title="Umblerito">
		<abbr class="avatar-elem" title="Umblerito">U</abbr>
  </a>
  <a href="javascript:;" class="avatar" data-toggle="tooltip" data-placement="top" title="Mary">
    <img src="//design.umbler.com//assets/img/docs/avatar.jpg" alt="Mary" />
  </a>
  <a href="javascript:;" class="avatar" data-toggle="tooltip" data-placement="top" title="Bella">
    <img src="//design.umbler.com//assets/img/docs/avatar.jpg" alt="Bella" />
  </a>
  <a href="javascript:;" class="avatar avatar-add" data-toggle="tooltip" data-placement="top" data-color="primary" title="Add user"></a>
</div>

Sizes

Add .avatar-{3x|4x|5x} for differents avatar sizes.

<div class="avatar-deck avatar-{3x|4x|5x}">
  <img src="//design.umbler.com//assets/img/docs/avatar.jpg" class="avatar" alt="Bella" />
  <img src="//design.umbler.com//assets/img/docs/avatar.jpg" class="avatar" alt="Bella" />
  <img src="//design.umbler.com//assets/img/docs/avatar.jpg" class="avatar" alt="Bella" />
  <img src="//design.umbler.com//assets/img/docs/avatar.jpg" class="avatar" alt="Bella" />
  <a href="javascript:;" class="avatar avatar-add" data-toggle="tooltip" data-placement="top" data-color="primary" title="Add user"></a>
</div>