In an attempt to make this component library inclusive towards all communities, a conscious effort is made to not be partial towards any one community by not using symbolism that might favour one over the other. This component library uses aliens or initials of names to depict avatars.

Round Avatars

There are three size variants for avatars. To use an avatar, one must use the class "avatar-" followed by the size letter "l","m","s" for large, medium and small respectively. For round avatars, one must also include class "av-round".

<div class="avatar-l av-round"> 
<img src="/CSS/Components/assets/alien-1.png"> </div>

Tile Avatars

For round avatars, one must also include class "av-tile".

<div class="avatar-l av-tile"> 
<img src="/CSS/Components/assets/alien-2.png"> </div>

Avatars with Initials

For avatars with initials, one must also include class in the heading tag "av-text". The following avatars use h2, h3, and h5 heading tags as the size decreases.

<div class="avatar-l av-tile"> 
<h2 class="av-text">PS</h2> </div>