Skip Navigation

Avatars

Avatars provide a quick visual identification of people and are used to access profile-related functions, such as sign-in/out, preferences, and personal information.

Available in React

Default Avatars

Default avatars provide a way of personalizing the display without asking the user to upload an image.

LT


When to Use

  • To indicate a user is signed in to an application.
  • There is no option to upload a photo.

Examples

Usage and Behaviors

Avatars and Messaging

Badges may be added to Avatars to call attention to user-specific status indicators and notifications.

Avatar Placement and Behavior

Avatars most commonly appear in the far right of the Header to indicate the signed in state of the user. Avatars may also appear within the screen content to represent a user profile.

Most commonly, selecting the avatar will display a Popover containing the available actions and/or links to actions related to the user’s profile. The popover may also contain the user’s role or status, key profile details (loyalty level or reward balance, for example), and an option to sign out.

Avatars may also link to modals and pages for more complex functions.


Examples

Sizes

Avatars may appear in different sizes:

  • Extra-Small: This is the standard size for avatars appearing in the Header.
  • Small: This size is recommended for contexts in which multiple avatars appear on the screen and for smaller screen sizes.
  • Medium: This size is recommended for contexts in which multiple avatars appear on the screen and for smaller screen sizes.
  • Large: This size is recommended for contexts in which multiple avatars appear on the screen and for larger screen sizes.
  • Extra-Large: Recommended for profile pages and other screens dedicated to an individual.

Photo Avatar

This version is used when the user may upload an image to personalize the avatar. The “Empty Photo” version of the photo avatar is used before the user uploads a photo. Spark provides 2 versions of the “Empty Photo” image for download.


When to Use

  • Use the “Empty Photo” version of the photo avatar only when the user is signed in and a photo has not been provided.

Developer Notes

Default Text Avatar

The default text Avatar is created by adding the classes spark-avatar and spark-avatar--text to an element that holds the abbreviated user’s names.

LT 
<a href="#" onclick="return false;" class="spark-avatar spark-avatar--text" aria-label="Laurence Traveler">LT</a>


<style type="text/css">
  
</style>

Photo Avatar

Similar to the text Avatar above, the Photo Avatar is created by adding the classes spark-avatar and spark-avatar--image to an element that holds the image to be displayed.

<div class="spark-mar-r-1 spark-inline-block">
  <a href="#" onclick="return false;" class="spark-avatar spark-avatar--image">
    <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/avatars/empty-avatar--dark.png" alt="Laurence Traveler" />
  </a>
</div>

<div class="spark-inline-block">
  <a href="#" onclick="return false;" class="spark-avatar spark-avatar--image">
    <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/avatars/empty-avatar--light.png" alt="Laurence Traveler" />
  </a>
</div>

<style type="text/css">
  
</style>

Avatars with Notifications

The Notification Badge should be placed inside the Avatar element to allow the correct positioning of the badge.

Text Avatar

<a href="#" onclick="return false;" class="spark-avatar spark-avatar--text" aria-label="Laurence Traveler" aria-describedby="avatar-message1">
  LT
  <span id="avatar-message1" class="spark-badge--notification spark-badge--notification__critical" aria-label="123 notifications">99+</span>
</a>


<style type="text/css">
  
</style>

Photo Avatar

<a href="#" onclick="return false;" class="spark-avatar spark-avatar--image">
  <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/avatars/profile-pic.jpg" alt="Laurence Traveler" aria-describedby="avatar-message2" />
  <span id="avatar-message2" class="spark-badge--notification spark-badge--notification__critical" aria-describedby="123 notifications">99+</span>
</a>


<style type="text/css">
  
</style>

Avatars on Light Backgrounds

When Avatars appear on light-colored backgrounds, use the spark-avatar--light class to adjust the display of the Avatars.

Text Avatar

LT 
<a href="#" onclick="return false;" class="spark-avatar spark-avatar--light spark-avatar--text" aria-label="Laurence Traveler">LT</a>


<style type="text/css">
  
</style>

Photo Avatar

<a href="#" onclick="return false;" class="spark-avatar spark-avatar--light spark-avatar--image">
  <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/avatars/profile-pic.jpg" alt="Laurence Traveler" />
</a>


<style type="text/css">
  
</style>

Static Avatars

Avatars do not always have to appear as links. The following examples illustrate how to create static Avatars, as well as how static Avatars can be used inside of links.

Note: If placing Avatars inside a link, you will need additional CSS to hide the link borders on focus. This is illustrated below in the second example using the .example--link-around-static-avatar class.

Static Text Avatar

LT

LT 
<span class="spark-avatar spark-avatar--text" aria-label="Laurence Traveler">LT</span>

<br /><br />

<a href="#" onclick="return false;" class="example--link-around-static-avatar">
  <span class="spark-avatar spark-avatar--text" aria-label="Laurence Traveler">LT</span>
</a>


<style type="text/css">
  

.example--link-around-static-avatar:focus {
  border-bottom-color: transparent;
}


</style>

Static Photo Avatar

<span class="spark-avatar spark-avatar--image">
  <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/avatars/profile-pic.jpg" alt="Laurence Traveler" />
</span>

<br /><br />

<a href="#" onclick="return false;">
  <span class="spark-avatar spark-avatar--image">
    <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/avatars/profile-pic.jpg" alt="Laurence Traveler" />
  </span>
</a>


<style type="text/css">
  
</style>

Avatar Sizes

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="spark-inline-block spark-mar-r-1 spark-mar-b-2--xs">
        <a href="#" onclick="return false;" class="spark-avatar spark-avatar--text spark-avatar--xl" aria-label="Laurence Traveler">LT</a>
      </div>

      <div class="spark-inline-block spark-mar-r-1 spark-mar-b-2--xs">
        <a href="#" onclick="return false;" class="spark-avatar spark-avatar--text spark-avatar--lg" aria-label="Laurence Traveler">LT</a>
      </div>

      <div class="spark-inline-block spark-mar-r-1 spark-mar-b-2--xs">
        <a href="#" onclick="return false;" class="spark-avatar spark-avatar--text spark-avatar--md" aria-label="Laurence Traveler">LT</a>
      </div>

      <div class="spark-inline-block spark-mar-r-1 spark-mar-b-2--xs">
        <a href="#" onclick="return false;" class="spark-avatar spark-avatar--text spark-avatar--sm" aria-label="Laurence Traveler">LT</a>
      </div>

      <div class="spark-inline-block">
        <a href="#" onclick="return false;" class="spark-avatar spark-avatar--text" aria-label="Laurence Traveler">LT</a>
      </div>
    </div>
  </div>
</div>


<style type="text/css">
  
</style>

Avatars can be rendered at different sizes, with the default size being extra-small. Other available sizes are small, medium, large and extra-large, and these can be rendered using classes specific the classes spark-avatar--sm, spark-avatar--md, spark-avatar--lg, and spark-avatar--xl respectively. These classes apply to both Text and Photo Avatars.

Accessibility Notes

Text Avatar

The Text Avatar requires an aria-label attribute to provide the full-length name of the user.

<a href="#" onclick="return false;" class="spark-avatar spark-avatar--text" aria-label="Laurence Traveler">LT</a>

Photo Avatar

The Photo Avatar should have an alt attribute to provide a clear text alternative of the image for assistive devices.

<a href="#" onclick="return false;" class="spark-avatar spark-avatar--image">
  <img src="path/to/image/profile-pic.jpg" alt="Laurence Traveler" />
</a>

Avatars with Notification Badges

Refer to the User Notification Badges documentation for details on how best to create accessible Avatars with notifications.