Avatar

Avatars are a graphical representation of a person or object using an icon, image, or a string with initials.

Class	Type
`avatar`	Avatar	A class representing an avatar

Types

Avatars have three different types:

Class	Type
`is-color-empty`	Empty	The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode.
-	Text	A text avatar can display up to two letters, typically a user’s or team’s initials.
-	Icon	One icon can be displayed in the center of an icon avatar.
-	Image	Avatars can display a preview of a file or the user’s profile picture.


      <div class="avatar is-color-empty"></div>

      <div class="avatar">aa</div>

      <div class="avatar"><span class="icon-pencil"></span></div>

      <img class="avatar" src="https://unsplash.it/40" alt="" />

Sizes

There are five different sizes used for avatars:

class	Type
`is-size-x-small`	x-small	24px
`is-size-small`	small	32px
-	medium	40px
`is-size-large`	large	48px
`is-size-x-large`	xlarge	64px


      <div class="avatar is-size-x-small">aa</div>

      <div class="avatar is-size-small">aa</div>

      <div class="avatar is-size-medium">aa</div>

      <div class="avatar is-size-large">aa</div>

      <div class="avatar is-size-x-large">aa</div>

Colors

In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors:

class	Type
`is-color-empty`	Empty
-	Default
`is-color-orange`	Orange
`is-color-green`	Green
`is-color-blue`	Blue
`is-color-pink`	Pink
`is-color-red`	Red


      <div class="avatar is-color-empty">aa</div>

      <div class="avatar">aa</div>

      <div class="avatar is-color-orange">aa</div>

      <div class="avatar is-color-green">aa</div>

      <div class="avatar is-color-blue">aa</div>

      <div class="avatar is-color-pink">aa</div>

      <div class="avatar is-color-red">aa</div>

Avatars Groups

avatars-group

Sizes

Avatar groups have four different sizes:

class	Type
`is-size-x-small`	x-small	24px
`is-size-small`	small	32px
-	medium	40px
`is-size-large`	large	48px


      <ul class="avatars-group">

        <li class="avatars-group-item"><div class="avatar is-size-x-small is-color-blue">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-size-x-small is-color-orange">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-size-x-small is-color-green">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-size-x-small">+2</div></li>

      </ul>

      <ul class="avatars-group">

        <li class="avatars-group-item"><div class="avatar is-size-small is-color-blue">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-size-small is-color-orange">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-size-small is-color-green">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-size-small">+2</div></li>

      </ul>

      <ul class="avatars-group">

        <li class="avatars-group-item"><div class="avatar is-color-blue">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-color-orange">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-color-green">aa</div></li>

        <li class="avatars-group-item"><div class="avatar">+2</div></li>

      </ul>

      <ul class="avatars-group">

        <li class="avatars-group-item"><div class="avatar is-size-large is-color-blue">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-size-large is-color-orange">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-size-large is-color-green">aa</div></li>

        <li class="avatars-group-item"><div class="avatar is-size-large">+2</div></li>

      </ul>

Avatar Group - icon with border

Avatar groups have four different sizes:

class	Type	Size
`is-with-border`	add border	1px


      <ul class="avatars-group is-with-border">

        <li class="avatars-group-item">

          <div class="avatar">

            <span class="icon-github" aria-hidden="true" aria-label="GitHub"></span>

          </div>

        </li>

        <li class="avatars-group-item">

          <div class="avatar">

            <span class="icon-gitlab" aria-hidden="true" aria-label="GitLab"></span>

          </div>

        </li>

        <li class="avatars-group-item">

          <div class="avatar">

            <span class="icon-bitBucket" aria-hidden="true" aria-label="BitBucket"></span>

          </div>

        </li>

        <li class="avatars-group-item">

          <div class="avatar"><span class="icon-azure" aria-hidden="true" aria-label="Azure"></span></div>

        </li>

      </ul>