Spectre Avatars
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:
- Spectre Avatar icons: Spectre Avatar icons offers us to include image as an icon.
- Spectre Avatar presence: Spectre Avatar presence is used to set the indicator of the presences.
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 = "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 Class</ strong > < br >< br > < div > < strong >Different Sizes & Presence Avatars:</ strong > < figure class = "avatar avatar-xs" > < img src = "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png" alt = "GeekdforBeginner" > < i class = "avatar-presence" ></ i > </ figure > < figure class = "avatar avatar-sm" > < img src = "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png" alt = "GeekdforBeginner" > < i class = "avatar-presence busy" ></ i > </ figure > < figure class = "avatar avatar-lg" > < img src = "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png" alt = "GeekdforBeginner" > < i class = "avatar-presence online" ></ i > </ figure > < figure class = "avatar avatar-xl" > < img src = "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png" alt = "GeekdforBeginner" > < 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
Contact Us