DS in CSS
Avatars
Style an element like a Casebook avatar with the class .cb-avatar.
This defaults to the small size, but size can be set explicitly by adding one of: .cb-extra-small, .cb-small,
.cb-medium, .cb-large, or
.cb-extra-large.
Be sure to specify a color and a background color for an Avatar.
XS
SM
MD
LG
XL
<div class="cb-avatar cb-extra-small cb-text-color-primary cb-background-color-patina-100">XS</div> <div class="cb-avatar cb-small cb-text-color-primary cb-background-color-heather-50">SM</div> <div class="cb-avatar cb-medium cb-text-color-primary cb-background-color-framboise-25">MD</div> <div class="cb-avatar cb-large cb-text-color-primary cb-background-color-millennial-100">LG</div> <div class="cb-avatar cb-extra-large cb-text-color-primary cb-background-color-ocean-100">XL</div>
Avatar buttons
The examples above are HTML <div> elements, but HTML <button>s can also be rendered as Avatars:
<button class="cb-avatar cb-extra-small cb-text-color-primary cb-background-color-patina-100" onclick="alert('you clicked XS');">XS</button>
<button class="cb-avatar cb-small cb-text-color-primary cb-background-color-heather-50" onclick="alert('you clicked SM');">SM</button>
<button class="cb-avatar cb-medium cb-text-color-primary cb-background-color-framboise-25" onclick="alert('you clicked MD');">MD</button>
<button class="cb-avatar cb-large cb-text-color-primary cb-background-color-millennial-100" onclick="alert('you clicked LG');">LG</button>
<button class="cb-avatar cb-extra-large cb-text-color-primary cb-background-color-ocean-100" onclick="alert('you clicked XL');">XL</button>