Installation Link
Copy the following to the <head>of your HTML
<link rel="stylesheet" href="https://design-with-ira.netlify.app/installationLinks/avatar.css">
Avatars are used to represent users in a virtual community. They can be the user's picture or
graphical illustrations. To implement this functionality, add the avatar class to
the <img> tag
Additional Classes
round class is used in the below example to make the avatars round.
Size Classes for Avatar
avatar-xsavatar-smavatar-mdavatar-lg
Status Classes for Avatar
These classes add a border to the avatars, indicating availability
status-availablestatus-busystatus-idlestatus-activestatus-inactive
To adjust the color of any of the above status classes, in your stylesheet do
:root {
--color-status-inactive: <color>;
--color-inverse-status-inactive: <color>;
}
.
This will change the the color wherever you use the status class - status-inactive-outline (borders),
status-inactive-bg (bacground), status-inactive (text). The inverse --color-inverse-status-inactive
property is used to provide appropriate text color against the status background.
