Avatars
Avatars
Use where a thumbnail representation of an editor or a user needs to be shown on a page.
- Avatars are always in a circle format
- In order to maintain consistency, we recommend using one of the 3 sizes indicated (24px, 32px, 64px)
- By default, or in the case where a user has not uploaded a picture, the avatar would show the user's intial
Default avatar
<div class="avatar">
<img data-toggle="avatar" alt="Alex" src=""/>
</div>
<div class="avatar">
<img data-toggle="avatar" alt="Barbara" src=""/>
</div>
<div class="avatar">
<img data-toggle="avatar" alt="Alex" src=""/>
</div>
Image Avatars
<div class="avatar avatar--small">
<img src="/images/default-avatars/Amelia.jpg"/>
</div>
<div class="avatar">
<img src="/images/default-avatars/Amelia.jpg"/>
</div>
<div class="avatar avatar--large">
<img src="/images/default-avatars/Amelia.jpg"/>
</div>
Certified Educators Avatars
<div class="avatar avatar--certified">
<img src="/images/default-avatars/Amelia.jpg"/>
</div>
For Your Family Avatars
Preschool
Little kid
Teen
Tween
Big kid
<div class="row">
<div class="gb-color col col-2">Preschool</div>
<div class="gb-color col col-10">
<div class="avatar"><img src="/images/default-avatars/big-kid-avatar.png"/></div>
</div>
<div class="gb-color col col-2">Little kid</div>
<div class="gb-color col col-10">
<div class="avatar"><img src="/images/default-avatars/little-kid-avatar.png"/></div>
</div>
<div class="gb-color col col-2">Teen</div>
<div class="gb-color col col-10">
<div class="avatar"><img src="/images/default-avatars/preschool-avatar.png"/></div>
</div>
<div class="gb-color col col-2">Tween</div>
<div class="gb-color col col-10">
<div class="avatar"><img src="/images/default-avatars/teen-avatar.png"/></div>
</div>
<div class="gb-color col col-2">Big kid</div>
<div class="gb-color col col-10">
<div class="avatar"><img src="/images/default-avatars/tween-avatar.png"/></div>
</div>
</div>
Download
Download Styles
Get a bundle with all avatars styles.
Download<p>Get a bundle with all avatars styles.</p>
<a href="/styles/atoms/avatars.css" download="cs-avatars.css" target="_blank" class="btn btn--primary">Download</a>
Download JS
Get a bundle with all avatars Javascript.
Download<p>Get a bundle with all avatars Javascript.</p>
<a href="/js/avatars.min.js" download="cs-avatars.min.js" target="_blank" class="btn btn--primary">Download</a>
Download For Your Family Avatars
Get the For Your Family Avatars.
Open<p>Get the For Your Family Avatars.</p>
<a href="https://drive.google.com/drive/folders/1V10YqGlqn0UyHqaXsrTinr89LSQeZt7w" target="_blank" class="btn btn--primary">Open</a>