User chips

Components

Last updated: August 2017

Chips are a representation of our users and can be shown in standard or expanded states. Standard Chips are circular with the default user image or avatar if set. Expanded Chips show the username and can also show a dismiss icon for removing the user from a group or list.

  • Expanded background is GreyLighten3
  • Username text is 14pt, Proxima Nova Regular, Primary Navy.

Chip Stack

The order of display is with the rightmost Chip at the top of the stack.

The number of Chips shown in a stack should be dynamically set by the width of the container it lives in. If there are more users than the stack can display a numbered chip is shown with the amount of users remaining.

Chips have a 2px/dp border the same color as the background it is placed on.

Do’s and Do Not’s

The color of the border between chips should match the background. This should NOT be a default white.

Do

Make the 2px/dp border around the chip the same color as the background

Don't

Make the 2dp/px border default to white