Avatars

Image Avatars

For use with photos — specifically logos in Storefronts.

Breakthru Beverage Group
HTML 
<div class="fizz-avatar">
  <img src="/prototypes/storefront/images/breakthru-logo.png" alt="Breakthru Beverage Group">
</div>

Initial Avatars

For use in messaging contexts. Two colors are available:

Class Color
.fizz-avatar-initial-1 $color-teal-800
.fizz-avatar-initial-2 $color-navy-800
J
B
HTML 
<div class="fizz-avatar-initial-1">J</div>
<div class="fizz-avatar-initial-2">B</div>