Square-Avatars

  1. Bootstrap
  2. Square-Avatars

Simple avatar

<span class="avatar" style="background-image: url(./https://laravelui.spruko.com/solic/build/assets/images/users/male/1.jpg)"></span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/male/2.jpg)"></span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/1.jpg)"></span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/2.jpg)"></span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/male/3.jpg)"></span>

Avatars list

+8 
<div class="avatar-list avatar-list-stacked">
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/10.jpg)"></span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/8.jpg)"></span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/9.jpg)"></span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/10.jpg)"></span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/male/11.jpg)"></span>
		<span class="avatar">+8</span>
		</div>

Avatar status

<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/male/8.jpg)"></span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/5.jpg)">
		<span class="avatar-status"></span>
		</span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/male/9.jpg)">
		<span class="avatar-status bg-red"></span>
		</span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/6.jpg)">
		<span class="avatar-status bg-green"></span>
		</span>
		<span class="avatar" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/7.jpg)">
		<span class="avatar-status bg-yellow"></span>
		</span>

Avatar size

<span class="avatar avatar-sm" style="background-image: url(./https://laravelui.spruko.com/solic/build/assets/images/users/male/4.jpg)"></span>
		<span class="avatar" style="background-image: url(./https://laravelui.spruko.com/solic/build/assets/images/users/female/3.jpg)"></span>
		<span class="avatar avatar-md" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/male/6.jpg)"></span>
		<span class="avatar avatar-lg" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/male/6.jpg)"></span>
		<span class="avatar avatar-xl" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/female/4.jpg)"></span>
		<span class="avatar avatar-xxl" style="background-image: url(https://laravelui.spruko.com/solic/build/assets/images/users/male/7.jpg)"></span>