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:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
    <h1 class="text-success">GeeksforGeeks</h1>
    <strong>SPECTRE Avatar Class</strong>
    <br><br>
    <div>
        <strong>Different Sizes & Presence Avatars:</strong>
        <figure class="avatar avatar-xs">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" 
                 alt="Geekdforgeeks">
            <i class="avatar-presence"></i>
        </figure>
        <figure class="avatar avatar-sm">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" 
                 alt="Geekdforgeeks">
            <i class="avatar-presence busy"></i>
        </figure>
        <figure class="avatar avatar-lg">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" 
                 alt="Geekdforgeeks">
            <i class="avatar-presence online"></i>
        </figure>
        <figure class="avatar avatar-xl">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" 
                 alt="Geekdforgeeks">
            <i class="avatar-presence away"></i>
        </figure>
        <br><br>
        <strong>Different Sizes & Without Image Avatars:</strong>
        <figure class="avatar avatar-xs"
                data-initial="AA"
                style="background-color: green;">
             <i class="avatar-presence online"></i>
        </figure>
        <figure class="avatar avatar-sm"
                data-initial="AB"
                style="background-color: green;">
             <i class="avatar-presence online"></i>
        </figure>
        <figure class="avatar avatar-lg"
                data-initial="AC"
                style="background-color: green;">
             <i class="avatar-presence online"></i>
        </figure>
        <figure class="avatar avatar-xl"
                data-initial="AD"
                style="background-color: green;">
             <i class="avatar-presence online"></i>
        </figure>
    </div>
    </center>
</body>

</html>

Output:

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

Explore