Avatar

Done

Representing a person, business, or concept, the Avatar component is a foundational element used throughout the platform as a quick and visual identifier.

Avatar

Anatomy

The essential parts of the avatar is the identifier, and the container. All other elements are optional, and act as extensions to further increase the functionality of the component. The basic variations of the avatar component are Icon, Numeric, Alphabetic, and Photo. The functionality of the avatar component (and each variant) can optionally include the Badge, Status Line, Progress Bar, and Stacked Quick Action Button. Avatars can be set to xsmall, small, medium, large, and xlarge.

  1. Surface
  2. Status line (optional)
  3. Icon/Alphabetic character/Numeric character
  4. Badge (optional)
  5. Status line (optional)
  6. Image (optional)
  7. Border (optional)
  8. Stacked quick action button (optional)

Please note: If the avatar is not utilizing the image variant, either the icon, alphabetic, or numeric variant is required. 

Please note: The avatar component, when used solely as an avatar (not nested within another component), does not utilize a border. To achieve the right engineering and construction logic, a border is present/possible but is only used when nested inside the quick action button component (as of this writing).

Icon

The icon variant is constructed with a surface stacked with an icon vertically and horizontally centered.

  1. Surface
  2. Icon

Numeric

The numeric variant is constructed with a surface stacked with numeric characters vertically and horizontally centered.

  1. Surface
  2. Numeric character(s) — Various type levels

Type levels

Since avatars can be set to display at several different sizes, the type treatments need to adjust at each level. See type table below.

Please note: Due to space constraints, limit to two characters. Some characters take up more horizontal space than others, so the type size should shrink instead of wrapping when running out of space. When shrinking, refer to the optional type level column in the type table below.

Alpha

The alpha variant is constructed with a surface stacked with alphabetic characters vertically and horizontally centered.

  1. Surface
  2. Alphabetic character(s) — Various type levels

Type levels (same as numeric)

Since avatars can be set to display at several different sizes, the type treatments need to adjust at each level. See type table below. 

Please note: Due to space constraints, limit to two characters. Consider using the badge component instead of the avatar if more than two characters are needed to represent a concept. Other nouns, such as a person or business can be represented easily by one or two characters. Some characters take up more horizontal space than others, so the type size should shrink instead of wrapping when running out of space. When shrinking, refer to the optional type level column in the type table below.

Photo

The photo variant is constructed of a surface and full-bleed image vertically and horizontally centered. 

  1. Surface
  2. Image
  3. Text description (not shown)

Image handling

A few things to keep in mind for handling images: 

  • Scaling from the center point of the image, the image should scale up or down to fill the surface completely — no whitespace should be visible — even if the aspect ratio is not perfectly square. 
  • The photo variant should have the alpha variant set as the fallback in the event an image file is corrupted, doesn’t exist, or is not passed in successfully.
  • When the alpha variant acts as a fallback, the characters come from the first letter in the text description or the first letter from the first two words if the description is the name of a person or business.
  • A text description should be pulled from the thing represented by the avatar (a merchant name for example) and should have additional descriptive words added (“merchant name logo” for example).
  • Support/handling for animated gif
  • Support for .gif .png .jpeg file types 

Badge

The badge extension is simply the badge component stacked on top of the avatar aligned to the upper right corner with a slight inset or overhand (depending on themed shape).

  1. Base avatar component
  2. Badge

Status line

The status line extension is a border surrounding the surface, and is used as a way to communicate the status of the person/business/thing the avatar represents. For example many customers have rewards programs for their users, and the status line is used as a way to represent the users reward status (gold, silver, platinum). 

  1. Base avatar component
  2. Status line

Progress bar

The progress bar extension is a border surrounding the surface, and is used as a way to represent a percentage complete. For example an avatar can be used to represent a savings goal, and the progress bar represents the current percentage of goal completion.

  1. Base avatar component
  2. Track
  3. Progress indicator

Stacked quick action button

The stacked quick action button extension enables a contextual action to be placed on top of the base avatar component. See the quick action button component and the embedded variant specifically for more details. Only the medium, large, and xlarge sizes can utilize the stacked quick action button extension.

  1. Base avatar component
  2. Quick action button — Embedded quick action button

Specs

Icon variant

No special padding is considered for the icon variant. See the sizes chart below for the icon and surface sizes. The icon is horizontally and vertically centered.

Numeric & alpha variant

No special padding is considered for the numeric or alpha variant. See the size chart below for the surface sizes, and see the type chart below for the type treatments. The type is horizontally and vertically centered. 

Photo variant

No special padding is considered for the photo variant, and the image should appear to be full-bleed.

Badge extension

The badge extension positions the badge component inset (represented by the negative numbers below) from the top and right. This example represents the default avatar specs. See the themed section as the avatar specs are slightly different for each style (square, squircle, rounded, etc.).

Status line extension

The status line extension utilizes a border with an equal distance padding on all four sides (number shown below on the right), and a border width (number shown just above the base avatar component). The first graphic below outlines what the numbers reference, and the second graphic below shows the numbers at each avatar size. 

Please note: This represents the default avatar specs. See the themed section as the avatar specs are slightly different for each style (square, squircle, etc.).

Progress bar extension

The progress bar extension utilizes two borders stacked on top of one another. The lower border is referred to as a track, and the upper border is referred to as the progress indicator. Both share the same specs with the status line extension (top number indicates border width; number to the right indicates border padding).

Stacked quick action button extension

The stacked quick action button extension is positioned either by an inset (negative number for xlarge size) or an offset (positive number for medium size). In the case of the large size no offset or inset is needed, and the quick action button can simply be aligned to the bottom right edge of the base avatar component. Note: xsmall and small sizes do not utilize the stacked quick action button extension due to their small footprint.  

Badge & stacked QAB considerations

No additional considerations are needed for the positioning of badge or stacked quick action button extensions are needed when either the status line or progress bar extensions are used together.

Size

Variant/Extension Property Value
All variants (xsmall) Surface/container size 24x24
All variants (small) Surface/container size 32x32
All variants (medium) Surface/container size 40x40
All variants (large) Surface/container size 64x64
All variants (xlarge) Surface/container size 104x104
All variants (xsmall) Border size 1
All variants (small) Border size 2
All variants (medium) Border size 2
All variants (large) Border size 3
All variants (xlarge) Border size 3
Status line & progress bar (all sizes) Border position Center
Status line & progress bar (xsmall) Border size 1
Status line & progress bar (xsmall) Padding between border and surface 1
Status line & progress bar (small) Border size 2
Status line & progress bar (small) Padding between border and surface 2
Status line & progress bar (medium) Border size 2
Status line & progress bar (medium) Padding between border and surface 2
Status line & progress bar (large) Border size 3
Status line & progress bar (large) Padding between border and surface 4
Status line & progress bar (xlarge) Border size 3
Status line & progress bar (xlarge) Padding between border and surface 5
Icon (xsmall) Icon size 18
Icon (small) Icon size 24
Icon (medium-xlarge) Icon size 32

Color

Element Property Value
Surface Background color Any color token including alpha tokens
Default ∆colorPlatformGray50
Surface Border color Any color token including alpha tokens
Default ∆colorPlatformGray100
Text (alpha or numeric) Text color Any color token
Default ∆colorPlatformGray900
Status line Background color Any color (not just the color tokens as some FI’s may need to use custom RGB colors.
Default ∆colorPlatformGray100
Progress bar Track background color ∆colorPlatformGray100
Progress bar Progress indicator Any color token
Default ∆colorBrandedGuidanceAccessible

Elevation

Element Property Value
Stacked quick action button extension Shadow color ∆surfacePlatformRaisedShadowColor
Stacked quick action button extension Shadow Y ∆surfacePlatformRaisedShadowY
Stacked quick action button extension Shadow opacity ∆surfacePlatformRaisedShadowOpacity
Stacked quick action button extension (resting) Shadow blur ∆surfacePlatformRaisedShadowBlurResting
Stacked quick action button extension (hover) Shadow blur ∆surfacePlatformRaisedShadowBlurLifted
Stacked quick action button extension (pressed) Shadow blur ∆surfacePlatformRaisedShadowBlurPressed
Stacked quick action button extension Shadow spread ∆surfacePlatformRaisedShadowSpread

Shape

The avatar component is unique in that it can be used in multiple different sizes. Most component variants maintain the same relative sizing, but the avatar has sizes across each level of small, medium and large sizes. For this reason it lives outside the typical component size classification. See the theming special size considerations section for more details.

Spacing

No spacing considerations for this component.

Type

Avatar Size Type Level Default Type Level (Dynamic)
xsmall Subtitle 2 Overline
small Small Heading Subtitle 2
medium Medium Heading Subtitle 1
large Large Heading Medium Heading
xlarge Large Heading N/A

States

The base avatar component is not interactive, and no states are considered. The quick action button extension should follow all the interactive states documented in the quick action button doc.

Theming

Avatar has unique theming arrangements based on the shape selection in Theme Builder. Based on the client selection between rounded, sharp, soft, and squircle, different arrangements are considered. 

Rounded

Rounded is the default shape for the design system out of the box, and follows all the spacing and specs outlined in this document. 

Sharp, soft, squircle

Sharp, soft, and squircle shapes are options from within Theme Builder, and receive special considerations outlined below.

Badge extension

The badge extension for the sharp, soft, and squircle shapes positions the badge component offset by 4 on the top and right.

Status line & progress bar extensions

The status line and progress bar extensions for the sharp, soft, and squircle shapes utilizes the same sizing, padding and positioning as the default round shape.

Stacked quick action button extension

The stacked quick action button extension for the sharp, soft, and squircle shapes is positioned by an offset of 8 on both the bottom and right. 

Special corner radius considerations

The themed shape of the avatar component changes corner radius values at different sizes. Usually a component corner radius is customized at different component sizes within Theme Builder (small component, medium component, large component) and dynamically applied to the component, but the avatar component is unique and independent from any custom radius. Refer to the table below for the preset shape treatments.

Avatar Size Shape Surface Radius Status Line & Progress Bar Radius
xsmall Sharp 0 0
small Sharp 0 0
medium Sharp 0 0
large Sharp 0 0
xlarge Sharp 0 0
xsmall Soft 4 6
small Soft 4 6
medium Soft 4 6
large Soft 4 7
xlarge Soft 4 8
xsmall Squircle 8 10
small Squircle 10 13
medium Squircle 12 15
large Squircle 16 20
xlarge Squircle 16 20
xsmall Rounded 24 28
small Rounded 32 38
medium Rounded 40 46
large Rounded 64 72
xlarge Rounded 104 114


Placement

Avatars can be placed anywhere, and can be used as a nested component.

Behavior

The base avatar component is not interactive and no additional behavior considerations are needed. 

Stacked extension

The stacked extension utilizes a quick action button, and all interactions with the extension are handled by the quick action button. 

Status line & progress bar

The status line and progress bar are not interactive and no interactive behavior considerations are needed. 

The progress bar indicator should animate in once the user scrolls the avatar component within view. If the avatar is within view on page load the animation fires right away.

Interaction Steps Duration Easing Notes Haptics
Display progress bar Step 1: Show track None None Show track right away
Step 2: Delay displaying progress indicator ∆motionTimeSlow None Displaying progress indicator starting at 0
Step 3: Animate progress indicator ∆motionTimeModerate ∆motionTimingFunctionStandard Build in progress indicator clockwise from 0 - full length over the duration defined


Developer Docs

Vue Developer Docs

Component documentation coming soon!