Avatar

/../hex/src/profiles/_avatars.scss

Display an image as an avatar. It uses a rounded square by default.

Person name avatar
<img class="avatar"
  src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />

Avatar sizes

/../hex/src/profiles/_avatars.scss

Change the size of the avatar. You can combine it with other avatar classes.

Person name avatar

Person name avatar

Person name avatar

Person name avatar

Person name avatar

Person name avatar

Person name avatar

<p>
  <img class="avatar avatar-huge"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar avatar-enormous"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar avatar-bigger"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar avatar-big"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar avatar-small"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar avatar-tiny"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>

Avatar shapes

/../hex/src/profiles/_avatars.scss

Change the shape of the avatar. You can combine it with other avatar classes.

Person name avatar

Person name avatar

Person name avatar

<p>
  <img class="avatar avatar-circle avatar-bigger"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar avatar-big"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar avatar-square"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>

Avatar borders

/../hex/src/profiles/_avatars.scss

Add a border to the avatar. You can combine it with other avatar classes.

Person name avatar

Person name avatar

Person name avatar

<p>
  <img class="avatar avatar-circle avatar-bigger avatar-border padding-small"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar avatar-big avatar-border padding-small"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>
<p>
  <img class="avatar avatar-square avatar-border padding-small"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
</p>

Profile

/../hex/src/profiles/_list.scss

The profile component shows the avatar, name and title of a person. This is used in pages where is important to show the profile information.

Jamie Smith

Senior Director of Cloud Technologies

<div class="profile">
  <img class="avatar avatar-huge"
    src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"/>
  <div class="profile__info">
    <h4>Jamie Smith</h4>
    <p class="profile__info__company">Senior Director of Cloud Technologies</p>
  </div>
</div>

Profile list

/../hex/src/profiles/_list.scss

This component shows a list of users. You can use it for pages like 'team' where more than one profile is displayed. The container size, number of columns and the avatar size can be modified in order to fit the needs of each specific page. It will be aligned to the center by default.

The class .text-c in the .row level allows to center the profile elements in the list, so when a profile is placed in a new row, it will be displayed in the center.

The .profile element has a fixed width and can be centered adding the class .margin-c

Jamie Smith

Senior Director of Cloud Technologies

Jamie Miller

Software Engineer

Jamie Smith

Senior Director of Cloud Technologies

Jamie Smith

Senior Director of Cloud Technologies

<div class="container container-small">
  <div class="row text-c">
    <div class="col-4">
      <div class="profile margin-c">
        <img class="avatar avatar-huge"
          src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"/>
        <div class="profile__info margin-c">
          <h4>Jamie Smith</h4>
          <p class="profile__info__company">Senior Director of Cloud Technologies</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="profile margin-c">
        <img class="avatar avatar-bigger"
          src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"/>
        <div class="profile__info margin-c">
          <h4>Jamie Miller</h4>
          <p class="profile__info__company">Software Engineer</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="profile margin-c">
        <img class="avatar avatar-huge"
          src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"/>
        <div class="profile__info margin-c">
          <h4>Jamie Smith</h4>
          <p class="profile__info__company">Senior Director of Cloud Technologies</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="profile margin-c">
        <img class="avatar avatar-huge"
          src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"/>
        <div class="profile__info margin-c">
          <h4>Jamie Smith</h4>
          <p class="profile__info__company">Senior Director of Cloud Technologies</p>
        </div>
      </div>
    </div>
  </div>
</div>

Profile vertical list

/../hex/src/profiles/_list.scss

This component shows a list of users vertically. You can use it for pages like webinars or study cases where the user is mentioned but it's not the main information you want to show.

Person name avatar

Miguel Martinez / Bitnami

Miguel Martinez is a core contributor to the Helm and Monocular projects & Senior Software Engineer at Bitnami.


Person name avatar

Other name / Bitnami

Miguel Martinez is a core contributor to the Helm and Monocular projects & Senior Software Engineer at Bitnami.

Miguel Martinez is a core contributor to the Helm and Monocular projects & Senior Software Engineer at Bitnami. Miguel Martinez is a core contributor to the Helm and Monocular projects & Senior Software Engineer at Bitnami.


<div class="container container-tiny">
  <div class="profile-list margin-v-big">
    <div class="profile-list__avatar">
      <img class="avatar avatar-enormous padding-normal"
        src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
    </div>
    <div class="profile-list__info padding-l-big">
      <h4>
        Miguel Martinez
        <span class="type-color-iron"> / </span>
        <span class="profile__info__company type-capitalize">Bitnami</span>
      </h4>
      <p>
        Miguel Martinez is a core contributor to the Helm and Monocular projects & Senior Software Engineer at Bitnami.
      </p>
      <hr class="separator-50 bg-iron margin-l-reset">
    </div>
  </div>
  <div class="profile-list margin-v-big">
    <div class="profile-list__avatar">
      <img class="avatar avatar-enormous padding-normal"
        src="https://s3.amazonaws.com/uifaces/faces/twitter/zeldman/128.jpg" alt="Person name avatar" />
    </div>
    <div class="profile-list__info padding-l-big">
      <h4>
        Other name
        <span class="type-color-iron"> / </span>
        <span class="profile__info__company type-capitalize">Bitnami</span>
      </h4>
      <p>
        Miguel Martinez is a core contributor to the Helm and Monocular projects & Senior Software Engineer at Bitnami.
      </p>
      <p>
        Miguel Martinez is a core contributor to the Helm and Monocular projects & Senior Software Engineer at Bitnami. Miguel Martinez is a core contributor to the Helm and Monocular projects & Senior Software Engineer at Bitnami.
      </p>
      <hr class="separator-50 bg-iron margin-l-reset">
    </div>
  </div>
</div>