​ ​ ​ Avatar Groups | Crossroads Digital Design Kit ​
  1. UI COMPONENTS
  2. MOLECULES

UI Components / Avatar Groups

Add one of the following classes to resize an avatar group.

<div class="avatar-group avatar-size-1">
  <img class="img-circle" src="https://placehold.it/100/111/fff">
  <img class="img-circle" src="https://placehold.it/100/777/fff">
</div>

<div class="avatar-group avatar-size-2">
  <img class="img-circle" src="https://placehold.it/100/111/fff">
  <img class="img-circle" src="https://placehold.it/100/777/fff">
</div>

<div class="avatar-group avatar-size-3">
  <img class="img-circle" src="https://placehold.it/100/111/fff">
  <img class="img-circle" src="https://placehold.it/100/777/fff">
</div>

<div class="avatar-group avatar-size-4">
  <img class="img-circle" src="https://placehold.it/100/111/fff">
  <img class="img-circle" src="https://placehold.it/100/777/fff">
</div>

<div class="avatar-group avatar-size-5">
  <img class="img-circle" src="https://placehold.it/100/111/fff">
  <img class="img-circle" src="https://placehold.it/100/777/fff">
</div>

<div class="avatar-group avatar-size-6">
  <img class="img-circle" src="https://placehold.it/100/111/fff">
  <img class="img-circle" src="https://placehold.it/100/777/fff">
</div>