Open In App

Spectre Avatar presence

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</head>
  
<body>
    <center>
    <h1 class="text-success">GeeksforGeeks</h1>
    <strong>SPECTRE Avatar presence Class</strong>
    <br><br>
    <div>
        <strong><u>Presence Busy:</u>
         Geeksforgeeks
        </strong>
        <figure class="avatar">
            <img src=
                 alt="Geekdforgeeks">
            <i class="avatar-presence busy"></i>
        </figure>
        <p>A Computer Science Portal for Geeks</p>
  
    </div>
    <div>
        <strong><u>Presence Away:</u>
         Geeksforgeeks
        </strong>
        <figure class="avatar">
            <img src=
                 alt="Geekdforgeeks">
            <i class="avatar-presence away"></i>
        </figure>
        <p>A Computer Science Portal for Geeks</p>
  
    </div>
    <div>
        <strong><u>Presence Online:</u>
         Geeksforgeeks
        </strong>
        <figure class="avatar">
            <img src=
                 alt="Geekdforgeeks">
            <i class="avatar-presence online"></i>
        </figure>
        <p>A Computer Science Portal for Geeks</p>
  
    </div>
    </center>
</body>
  
</html>


Output:

Spectre Avatar presence

Spectre Avatar presence

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



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