Open In App

Spectre Avatars

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</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=
                 alt="Geekdforgeeks">
            <i class="avatar-presence"></i>
        </figure>
        <figure class="avatar avatar-sm">
            <img src=
                 alt="Geekdforgeeks">
            <i class="avatar-presence busy"></i>
        </figure>
        <figure class="avatar avatar-lg">
            <img src=
                 alt="Geekdforgeeks">
            <i class="avatar-presence online"></i>
        </figure>
        <figure class="avatar avatar-xl">
            <img src=
                 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



Last Updated : 11 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads