Spectre Avatar presence

Spectre Avatar presence is used to set the indicator of the presences. We can add an <i> element and place a avatar-presence class inside that element and add online, away or busy whatever you want to show.

Spectre Avatar presence Class:

avatar-presence: This class is used to render the presence layout in the avatar.
online: This class is used to set the presence status online.
busy: This class is used to set the presence status busy.
away: This class is used to set the presence status away.

Syntax:

<figure class="avatar avatar-xl">
  <img src="..." alt="...">
  <i class="avatar-presence online"></i>
</figure>

Below example illustrate the Spectre Avatar presence:

Example: In this example we will see all the three presence class is being used.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
    <h1 class="text-success">w3wiki</h1> 
    <strong>SPECTRE Avatar presence Class</strong> 
    <br><br> 
    <div> 
        <strong><u>Presence Busy:</u> 
         w3wiki 
        </strong> 
        <figure class="avatar"> 
            <img src= 
"https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png" 
                 alt="GeekdforBeginner"> 
            <i class="avatar-presence busy"></i> 
        </figure> 
        <p>A Computer Science Portal for Beginner</p> 
  
    </div> 
    <div> 
        <strong><u>Presence Away:</u> 
         w3wiki 
        </strong> 
        <figure class="avatar"> 
            <img src= 
"https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png" 
                 alt="GeekdforBeginner"> 
            <i class="avatar-presence away"></i> 
        </figure> 
        <p>A Computer Science Portal for Beginner</p> 
  
    </div> 
    <div> 
        <strong><u>Presence Online:</u> 
         w3wiki 
        </strong> 
        <figure class="avatar"> 
            <img src= 
"https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png" 
                 alt="GeekdforBeginner"> 
            <i class="avatar-presence online"></i> 
        </figure> 
        <p>A Computer Science Portal for Beginner</p> 
  
    </div> 
    </center> 
</body> 
  
</html> 

Output:

Spectre Avatar presence

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

HTML

Contact Us