Avatars

We use them when representing particular person in different view. For example in the profile or in the last visited menu.

By adding the class avatar-placeholder--module_name, for example, avatar-placeholder--people, the avatar placeholder background color is aligned with the model color

The container with the `avatar` class does not define the height and width of the avatar, to define that you need to create a new container and set the width and height on the avatar for that specific container.

Basic structure

<span class="avatar">
  <img src="https://randomuser.me/api/portraits/women/12.jpg">
</span>

Examples

Rectangle

  <span class="avatar">
    <img src="https://randomuser.me/api/portraits/women/44.jpg">
  </span>

Circle

  <span class="avatar avatar--circle">
    <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="woman">
  </span>

Placeholder

The wrapper of the avatar should have a defined height and width of the avatar inside and the font size for the icon or text. For the people profile we use the initials of the person first and last name. For all other modules, we use the modules icons.

<div class="avatar avatar-placeholder avatar-placeholder--people">
    <div>JS</div>
</div>

<div class="avatar avatar-placeholder avatar-placeholder--companies">
    <i class="icon-companies"></i>
</div>

<div class="avatar avatar-placeholder avatar-placeholder--people">
    <div>JS</div>
</div>
<div class="avatar avatar-placeholder avatar-placeholder--companies">
    <i class="icon-companies"></i>
</div>

Avatar with border

We used, for example, in the last visited dropdown menu in the Eventival 3 version. The detailed description will be added later.

CSS