Avatars

Avatars are used to quickly identify a customer’s properties including: studies, drafts, highlight reels, etc.

Avatars

DW ZM 
<tk-avatar class="mb-2x">DW</tk-avatar>
<tk-avatar light>ZM</tk-avatar>

Description

Avatars show the initials of an individual. Add light to use the avatar on a dark background.

Size

HP HG RW 
<tk-avatar class="mb-2x" size="small">HP</tk-avatar>
<tk-avatar class="mb-2x" size="medium">HG</tk-avatar>
<tk-avatar class="mb-2x" size="large">RW</tk-avatar>

Description

Depending on the context, a different size can be used. The default is large.

Usage

Do

  • Show username on hover (requires JS)

Don't

  • Change the color of the avatar background

Accessibility

  • Does not receive :focus