Avatars are used to quickly identify a customer’s properties including: studies, drafts, highlight reels, etc.
This component is deprecated! Please use the new Avatar instead.
Old component won’t get updates unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
New component should always be used unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
If you are looking to migrate this component and require help, reach out to the #ask-design-system Slack channel.
<tk-avatar class="mb-2x">DW</tk-avatar>
<tk-avatar type="light" class="mb-2x">ZM</tk-avatar>
<tk-avatar type="muted" class="mb-2x l-block">ZM</tk-avatar>
Avatars show the initials of an individual. Add light
to use the avatar on a dark background.
Insight
When a user sees their initials, it instills a sense of ownership for the corresponding section. Eventually, we’d like to make this a profile picture.<tk-avatar class="mb-2x" size="small">W</tk-avatar>
<tk-avatar class="mb-2x" size="medium">W</tk-avatar>
<tk-avatar class="mb-2x" size="large">W</tk-avatar>
<tk-avatar class="mb-2x" size="xl">W</tk-avatar>
Depending on the context, a different size can be used. The default is large
.
tk-tooltip
)Does not receive :focus