Avatars
Examples for opting different size of image classes.
Example
Avatar classes are applied to the image so that it scales with the parent element.
<img class="u-xs-avatar" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
<img class="u-sm-avatar" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
<img class="u-avatar" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
<img class="u-lg-avatar" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
<img class="u-xl-avatar" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
Shapes
Use border classes to make avatars more rounded.
<img class="u-sm-avatar rounded" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
<img class="u-sm-avatar rounded-circle" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
<img class="u-avatar rounded" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
<img class="u-avatar rounded-circle" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
<img class="u-lg-avatar rounded-lg" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
<img class="u-lg-avatar rounded-circle" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
Abbreviation
<span class="btn btn-icon btn-xs btn-secondary">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-sm btn-secondary">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-secondary">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-lg btn-secondary">
<span class="btn-icon__inner">A</span>
</span>
Flat contextual variations
<span class="btn btn-icon btn-primary mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-secondary mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-success mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-danger mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-warning mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-info mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-indigo mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-light mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-white mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-dark mr-2">
<span class="btn-icon__inner">A</span>
</span>
Soft contextual variations
<span class="btn btn-icon btn-soft-primary mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-soft-secondary mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-soft-success mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-soft-danger mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-soft-warning mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-soft-info mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-soft-indigo mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-soft-light mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-soft-white mr-2">
<span class="btn-icon__inner">A</span>
</span>
<span class="btn btn-icon btn-soft-dark mr-2">
<span class="btn-icon__inner">A</span>
</span>
Bordered
Use bordered classes to wrap .u-avatar elements with borders.
<img class="u-sm-avatar u-sm-avatar--bordered mr-2" src="../assets/img/img1.jpg" alt="Image Description">
<img class="u-lg-avatar u-xl-avatar--bordered" src="../assets/img/img1.jpg" alt="Image Description">
Group
Group your avatars with the help of Negative margin classes.
<span class="mr-5">
<span class="d-inline-block u-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</span>
<span class="d-inline-block u-avatar u-sm-avatar--bordered rounded-circle ml-n3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</span>
<span class="d-inline-block u-avatar u-sm-avatar--bordered rounded-circle ml-n3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</span>
<span class="d-inline-block u-avatar u-sm-avatar--bordered rounded-circle ml-n3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</span>
<span class="d-inline-block u-avatar u-sm-avatar--bordered rounded-circle ml-n3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</span>
</span>
<span class="mr-5">
<span class="d-inline-block u-lg-avatar u-xl-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</span>
<span class="d-inline-block u-lg-avatar u-xl-avatar--bordered rounded-circle ml-n4">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</span>
<span class="d-inline-block u-lg-avatar u-xl-avatar--bordered rounded-circle ml-n4">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</span>
<span class="d-inline-block u-lg-avatar u-xl-avatar--bordered rounded-circle ml-n4">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</span>
<span class="d-inline-block u-lg-avatar u-xl-avatar--bordered rounded-circle ml-n4">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</span>
</span>
Important
Front does not include all classes, but includes only used classes to reduce the size of CSS files. However, you can add more sizes by adding entries to the Sass map variable via:
assets/scss/base/avatar/.