Avatar
Ani-Design provides various classes to quickly style avatars with different shapes and sizes. Style an avatar with class .avatar along with the required classes (e.g. .rounded).
Avatar Sizes
Avatars are available in various sizes. Adding a size class e.g. .lg will change the size.
<div class="avatar sm">
<img src="avatar.jpg" alt="" />
</div>
<div class="avatar">
<img src="avatar.jpg" alt="" />
</div>
<div class="avatar lg">
<img src="avatar.jpg" alt="" />
</div>
Avatar Shape
Avatar are by default circular. Change the shape by adding .square or .rounded.
Avatar Sizes
Avatars are available in various sizes. Adding a size class e.g. .lg will change the size.
<div class="avatar">
<img src="avatar.jpg" alt="" />
</div>
<div class="avatar square">
<img src="avatar.jpg" alt="" />
</div>
<div class="avatar rounded">
<img src="avatar.jpg" alt="" />
</div>