Angular Avatar

Our Angular avatar offers a collection of cool avatars with different shapes, sizes and with the possibility to group them.

Examples

Use the .rounded-circle modifier class to create a circle avatar.

Image placeholder Image placeholder 

<a href="javascript:;" class="avatar">
  <img
    src=https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-4.jpg
    alt="Image placeholder" />
</a>

<a href="javascript:;" class="avatar">
  <img
    src=https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-4.jpg
    class="rounded-circle"
    alt="Image placeholder" />
</a>

Sizing

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Image placeholder Image placeholder Image placeholder Image placeholder Image placeholder 

<a href="javascript:;" class="avatar avatar-xs">
  <img
      alt="Image placeholder"
      class="rounded-circle"
      src="https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-4.jpg"/>
</a>

<a href="javascript:;" class="avatar avatar-sm">
  <img
      alt="Image placeholder"
      class="rounded-circle"
      src="https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-4.jpg"/>
</a>

<a href="javascript:;" class="avatar">
  <img
      alt="Image placeholder"
      class="rounded-circle"
      src="https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-4.jpg"/>
</a>

<a href="javascript:;" class="avatar avatar-lg">
  <img
      alt="Image placeholder"
      class="rounded-circle"
      src="https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-4.jpg"/>
</a>

<a href="javascript:;" class="avatar avatar-xl">
  <img
      alt="Image placeholder"
      class="rounded-circle"
      src="https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-4.jpg"/>
</a>

Group

Include multiple avatar items inside an .avatar-group container.

Image placeholder Image placeholder Image placeholder Image placeholder 
<div class="avatar-group">
  <a
    href="javascript:;"
    class="rounded-circle avatar"
    data-toggle="tooltip"
    data-original-title="Jessica Rowland">
    <img
      alt="Image placeholder"
      src="https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-1.jpg"
      class="rounded-circle" />
  </a>
  <a
    href="javascript:;"
    class="avatar rounded-circle"
    data-toggle="tooltip"
    data-original-title="Audrey Love">
    <img
      alt="Image placeholder"
      src="https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-2.jpg"
      class="rounded-circle" />
  </a>
  <a
    href="javascript:;"
    class="avatar rounded-circle"
    data-toggle="tooltip"
    data-original-title="Michael Lewis">
    <img
      alt="Image placeholder"
      src="https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-3.jpg"
      class="rounded-circle" />
  </a>
  <a
    href="javascript:;"
    class="rounded-circle avatar"
    data-toggle="tooltip"
    data-original-title="Marco Orlans">
    <img
      alt="Image placeholder"
      src="https://demos.creative-tim.com/argon-dashboard-pro-angular/assets/img/theme/team-4.jpg"
      class="rounded-circle" />
  </a>
</div>