1. Docs
  2. Avatars

Avatars

Create and group avatars of different sizes and shapes with a single component.

Sizing

Using autoRoyal’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.

...
...
...
...
...
... 
<div class="avatar avatar-xxl">
  <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xl">
  <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-lg">
  <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar">
  <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-sm">
  <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xs">
  <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Shape

Change the shape of an avatar with the default autoRoyal image classes.

...
...
...
...
...
... 
<div class="avatar avatar-xxl">
    <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded">
</div>
<div class="avatar avatar-xl">
    <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar avatar-lg">
    <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded">
</div>
<div class="avatar avatar-lg">
    <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>
<div class="avatar">
    <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded">
</div>
<div class="avatar">
    <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
</div>

Initials

You won't always have an image for every user, so easily use initials instead.

FT
FT
FT
FT
FT
FT 
<div class="avatar avatar-xxl">
  <span class="avatar-title rounded-circle">FT</span>
</div>

<div class="avatar avatar-xl">
  <span class="avatar-title rounded-circle">FT</span>
</div>

<div class="avatar avatar-lg">
  <span class="avatar-title rounded-circle">FT</span>
</div>

<div class="avatar">
  <span class="avatar-title rounded-circle">FT</span>
</div>

<div class="avatar avatar-sm">
  <span class="avatar-title rounded-circle">FT</span>
</div>

<div class="avatar avatar-xs">
  <span class="avatar-title rounded-circle">FT</span>
</div>

Groups

Easily group avatars of any size, shape and content with a single component. Each avatar can also use an to link to the corresponding profile..

...
...
...
FT
...
...
...
FT 
<div class="avatar-group">
    <div class="avatar avatar-lg">
        <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
    </div>
    <div class="avatar avatar-lg">
        <img src="../../assets/images/users/user-2.jpg" alt="..." class="avatar-img rounded-circle">
    </div>
    <div class="avatar avatar-lg">
        <img src="../../assets/images/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
    </div>
    <div class="avatar avatar-lg">
        <span class="avatar-title rounded-circle">FT</span>
    </div>
</div>

<div class="avatar-group">
    <div class="avatar">
        <img src="../../assets/images/users/user-1.jpg" alt="..." class="avatar-img rounded-circle">
    </div>
    <div class="avatar">
        <img src="../../assets/images/users/user-2.jpg" alt="..." class="avatar-img rounded-circle">
    </div>
    <div class="avatar">
        <img src="../../assets/images/users/user-3.jpg" alt="..." class="avatar-img rounded-circle">
    </div>
    <div class="avatar">
        <span class="avatar-title rounded-circle">FT</span>
    </div>
</div>
Jump to
Top