Avatar
Search the component library

Avatar

v1.0.0-beta.1
Download UI Kit v1.9.0

This component defines the standard visual style for the avatar element which allows for photo upload.

Download UI Kit v1.9.0

Usage Guidelines

Every instance of the avatar element should come from this component.

Features

  • Photo upload from machine or device
  • Ability to scale and reposition photo
  • Photo cropping
  • Delete photo

Avatar

The avatar component is comprised of an avatar image and a linked area that allows the user to update their photo.

A new account will display the Default Avatar image. During the photo upload process the user is provided with photo editing tools in order to scale and crop their photo appropriately.

At any time the user may upload a new photo or delete their current photo. Once a photo is deleted the Default Avatar will display again.

Default Avatar

Photo Avatar

Avatar Menu

Default Avatar

When “Update Photo” is pressed on the Default Avatar the user moves directly on to the Upload Photo process. No menu is presented.

Default Avatar

Photo Avatar

When “Update Photo” is pressed on a Photo Avatar a menu is presented with options to “Upload Photo” or “Delete Photo”.

Photo Avatar

Photo Avatar Hover State

Upload Photo

Open File

When the photo upload process is initiated the user’s browser or device will display the default open file menu.

Once a file is chosen the user will move on to the Edit Photo process.

Browser Default Open File

Edit Photo

Scale

A photo may be scaled from 50% to 200% in size by clicking and dragging the slider towards the bottom of the Edit Photo modal.

Initial Scale

Increased Scale

Reposition

The user may also click on their photo and drag it in order to reposition the photo around the silhouette for proper cropping.

Initial Position

Photo Repositioned for Cropping

Crop

The final step is to crop the uploaded photo by pressing the Save button. The portion of the photo in the open square of the silhouette will be set as the user’s avatar.

Pressing Save Crops the Photo

Delete Photo

If a user chooses Delete Photo from the Avatar Menu they will be asked if they are sure they would like to permanently delete their photo.

Once their photo is deleted it will be replaced by the Default Avatar until a new photo is uploaded.

Redlines

Avatar

Window
Update Photo

Avatar Menu

Menu
Menu Item
Menu Item Hover

Avatar Menu

Avatar Menu with Hover Item

Edit Photo

Modal
Silhouette
Silhouette Subtraction
  • Width: 200px
  • Height: 200px
Slider
  • Width: 300px
  • Height: 30px
  • Background Color: Brightly Lit, Opacity 75%
  • Text Color: Pitch
  • Icon: fa-photo Icon
Slider Bar
  • Color: Pitch
  • Width: 220px
  • Thickness: 2px
  • Circle: 14px Diameter

Changelog

1.0.0-beta.1

Initial version