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
Share your thoughts in the comments
Please Login to comment...