Aurodesign system
AvatarInstallAPIReleases
See Github issuesInstall npm pachageSee the code on Github

Avatar

The <auro-avatar> is an HTML custom elementLink to external site.This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites. for the purpose of displaying iconic imagery for representation.

Use cases

The auro-avatar element should be used in situations where users may:

  • be provided with imagery to represent an airline's tail, cities, airports, or user profiles
  • need a visual representation

Example(s)

See code 
<auro-avatar></auro-avatar>

Recommended Use and Version Control

There are two important parts of every Auro component. The classLink to external site.This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites. and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the auro-avatar custom element is defined automatically.

To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our AuroAvatar.register(name) method and pass in a unique name.

import { AuroAvatar } from '../src/auro-avatar.js';

AuroAvatar.register('custom-avatar');

This will create a new custom element that you can use in your HTML that will function identically to the <auro-avatar> element.

See code 
<custom-avatar></custom-avatar>