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= <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
Reference: https://picturepan2.github.io/spectre/components/avatars.html#avatars-presence
Please Login to comment...