<div class="badge"> 100 </div>

<div class="c-avatar c-avatar--small">
  <span class="flexicon flexicon-avatar--large--circle"></span>
</div>

<div class="c-avatar c-avatar--small"> ui </div>

<div class="c-avatar c-avatar--medium"> ui </div>

<div class="c-avatar c-avatar--large"> ui </div>

<div class="c-avatar c-avatar--small c-avatar--photo"
     title="Descriptive text here"
     alt="Descriptive text here"
     style="background-image: url('https://cdn.photos.sparkplatform.com/demomls/20150420191731586160000000.jpg');">
</div>

<div class="c-avatar c-avatar--medium c-avatar--photo"
     title="Descriptive text here"
     alt="Descriptive text here"
     style="background-image: url('https://cdn.photos.sparkplatform.com/demomls/20150420191731586160000000.jpg');">
</div>

<div class="c-avatar c-avatar--large c-avatar--photo"
     title="Descriptive text here"
     alt="Descriptive text here"
     style="background-image: url('https://cdn.photos.sparkplatform.com/demomls/20150420191731586160000000.jpg');">
</div>

     <div class="c-avatar-stacked-card">
          <div class="c-avatar-stacked-group">
               <!-- First element is the agent initials, and second element is office name first letter -->
               <div class="c-avatar c-avatar--largest ">TA</div>
               <div class="c-avatar c-avatar--small ">F</div>
          </div>
          <div class="c-avatar-name-group">
               <!-- First two elements are the agent name, and third element is office name -->
               <div class="t-title--largest u-overflow-ellipsis hidden-xs">Test Account</div>
               <div class="t-title--large visible-xs-block">Test Account</div>
               <div class="office-name">FBS Test Account</div>
          </div>
     </div>