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 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.
<figure class="avatar avatar-xl" data-initial="GG"> ... </figure>
Below example illustrate the Spectre Avatar: