Avatar
The Avatar component is typically used to display images, icons, or initials representing people or other entities.
2xl
xl
lg
md
sm
xs
image
label
JD
JD
JD
JD
JD
JD
Code
<div
class="backoffice-avatar backoffice-avatar-md"
style="background-image:url(URL)"
></div>
-- or using label --
<div class="backoffice-avatar backoffice-avatar-md">
<span>JD</span>
</div>
| Class name | type | |
|---|---|---|
| backoffice-avatar | component | Container element |
| backoffice-avatar-xs | modifier | Adds xs size |
| backoffice-avatar-sm | modifier | Adds sm size |
| backoffice-avatar-md | modifier | Adds md size |
| backoffice-avatar-lg | modifier | Adds lg size |
| backoffice-avatar-xl | modifier | Adds xl size |
| backoffice-avatar-2xl | modifier | Adds 2xl size |