Avatar

Default

You can choose the size you need.

Sizes:

Normal:

avatar-default
Medium:

avatar-md-default
Large:

avatar-lg-default

Example:

      
      <img class="avatar-default" src="/pexels-jean-van-der-meulen-2078467.webp" />
      <img class="avatar-md-default" src="/pexels-cristina-andrea-alvarez-cruz-2850833.webp"/>
      <img class="avatar-lg-default" src="/pexels-eva-bronzini-5502104.webp" />

Bordered

You can change the border color and size depending on what you want, simply change the 'avatar-size-color'.

Colors:

avatar-size-green
avatar-size-red
avatar-size-orange
avatar-size-yellow
avatar-size-blue
avatar-size-purple
avatar-size-gray
avatar-size-light

Sizes:

Normal:

avatar-color
Medium:

avatar-md-color
Large:

avatar-lg-color

Example:

      
      <img class="avatar-red" src="/pexels-jean-van-der-meulen-2078467.webp" />
      <img class="avatar-md-red" src="/pexels-cristina-andrea-alvarez-cruz-2850833.webp" />
      <img class="avatar-lg-red" src="/pexels-eva-bronzini-5502104.webp" />
      
      <img class="avatar-light" src="/pexels-philipp-fahlbusch-11805196.webp" />
      <img class="avatar-md-light" src="/pexels-yeye-18168507.webp" />
      <img class="avatar-lg-light" src="/pexels-cristina-andrea-alvarez-cruz-2850833.webp" />
      
      <img class="avatar-yellow" src="/pexels-yeye-18168507.webp" />
      <img class="avatar-md-yellow" src="/pexels-eva-bronzini-5502104.webp" />
      <img class="avatar-lg-yellow" src="/pexels-philipp-fahlbusch-11805196.webp" />

Hummingbird photo by Cristina Andrea Alvarez Cruz. You can find the photo at:

hummingbird

Llama photo by Eva Bronzini. You can find the photo at:

llama

Penguin photo by Jean van der Meulen. You can find the photo at:

penguin

Duck photo by Philipp Fahlbusch. You can find the photo at:

duck

Cat photo by Yeye. You can find the photo at:

cat