Avatar

The Avatar component is typically used to display images, icons, or initials representing people or other entities.

2xl
xl
lg
md
sm
xs
JD
JD
JD
JD
JD
JD

Code

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>

Details

AttributeTypeDescription
.backoffice-avatar
component
Avatar component, this is required for all avatars, it' required to select a size to make it appear.
.backoffice-avatar-2xl
modifier
Avatar component with 2xl style
.backoffice-avatar-xl
modifier
Avatar component with xl style
.backoffice-avatar-lg
modifier
Avatar component with lg style
.backoffice-avatar-md
modifier
Avatar component with md style
.backoffice-avatar-sm
modifier
Avatar component with sm style
.backoffice-avatar-xs
modifier
Avatar component with xs style