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
Last Updated :
28 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...