Components: Avatars
Avatars provide a way for users to recognize that they're signed in, provide a sense of connection with the product.
Quick Summary
Creating Avatars: Create avatar images by nesting an image element inside a div element, then applying a 50% border-radius to the div element. Add a 1px solid border to the div element in the brand colour Charcoal. Add equal width and height to the div element, and set the image width and height to inherit. Best practice is to set up small, medium and large classes, then apply as needed for consistency. View on Codepen.
Creating Avatars
To create an avatar, simply create a div element to hold the image, then create an img element inside of that div. Then, depending on the size you'd like to create, apply one of the three size option classes as listed below and in the codepen example.
Avatar Variations
When implementing an avatar, three size options are available: small, medium, and large. View on Codepen
