Avatars

Avatar sizesAvatars - Avatar sizes

Generic sizes for the avatars

.tb-avatar--micro - Micro size of avatar (you have to put the correct img size.)
.tb-avatar-small - Small size of avatar (you have to put the correct img size.)
.tb-avatar-normal - Normal size of avatar (you have to put the correct img size.)
.tb-avatar-medium - Medium size of avatar (you have to put the correct img size.)
.tb-avatar-big - Big size of avatar (you have to put the correct img size.)
.tb-avatar--with-overlay - Add overlay to avatar

.tb-avatar--micro Pp

.tb-avatar-small Pp

.tb-avatar-normal Pp

.tb-avatar-medium Pp

.tb-avatar-big Pp

.tb-avatar--with-overlay Pp

<span class="tb-avatar tb-avatar-has-color [modifier class]">
  <span class="tb-avatars-initials">Pp</span>
</span>
<span class="tb-avatar tb-avatar-has-color [modifier class]">
  <span class="tb-avatar-icon-wrapper">
    <i class="icon-tb-user"></i>
  </span>
</span>

Special avatarsAvatars - Special avatars

Special styles for tb-avatar

.tb-avatar--empty - Empty avatar style
.tb-avatar--square - Squared avatar
.tb-avatar--disabled - Non clickable avatar
.tb-avatar--no-background - transparent background
.tb-avatar--mention-link - Avatar with a mention link
.tb-avatar--with-hover - Avatar with hover state
.tb-avatar--unassigned - Unassigned styles

.tb-avatar--empty Pp

.tb-avatar--square Pp

.tb-avatar--disabled Pp

.tb-avatar--no-background Pp

.tb-avatar--mention-link Pp

.tb-avatar--with-hover Pp

.tb-avatar--unassigned Pp

<span class="tb-avatar tb-avatar-normal [modifier class]">
  <span class="tb-avatars-initials">Pp</span>
</span>
<span class="tb-avatar tb-avatar-normal [modifier class]">
  <img src="http://www.gravatar.com/avatar/d3986ea7084d3ab95900baa2a3686185?size=48&amp;amp;default=mm" width="28" height="28" alt="Frank Kramer" />
</span>
<span class="tb-avatar tb-avatar-normal [modifier class]">
  <span class="tb-avatar-icon-wrapper">
    <i class="icon-tb-user"></i>
  </span>
</span>