Spectre Avatars

Spectre Avatars offers us to include avatar in the figure element. If you want to design a user profile like things then definitely you need to use this feature. To add avatar class to <img> element. There are 4 additional sizes available, including avatar-xl(64px), avatar-lg(48px), avatar-sm(24px), and avatar-xs(16px). By default, the avatar size is 32px.

Suppose the user profile does not have any pictures then there is a solution for that as well you may use their initials for avatars. Add the avatar class and avatar size class to <div> element. The data-initial attribute is the name appear inside the avatar. 

Spectre Avatars Class:

• avatar: This class is used too include the avatar.
• avatar-xl|lg|sm|xs: This class is used to define the size of the avatar.

Spectre Avatars:

• Spectre Avatar icons: Spectre Avatar icons offers us to include image as an icon.
• Spectre Avatar presence: Spectre Avatar presence is used to set the indicator of the presences.

Note: You need to add data-initial attribute to mention the initial if avatar image is missing. If there is no data-initial or the attribute is not specified, the avatar will appear as a dot.

Syntax:

<figure class="avatar avatar-xl" data-initial="GG">
...
</figure>

Below example illustrate the Spectre Avatar:

Example:

Output:

👁 Image

Reference: https://picturepan2.github.io/spectre/components/avatars.html