Components

Avatar(SCSS)

Display user images and badges on Thumbtack.

Version:	`4.0.3` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-scss`

Avatar component is out-of-date

The sizes and styles available in the SCSS version of the Avatar component are out-of-date. Use the React component if possible or reach out to the Design Systems team if you are blocked.

Avatar Sizes

Extra Large

<div class="tp-avatar tp-avatar--xlarge">
    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>

Large

<div class="tp-avatar tp-avatar--large">
    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>

Medium

<div class="tp-avatar tp-avatar--medium">
    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>

Small

<div class="tp-avatar tp-avatar--small">
    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>

Extra Small

<div class="tp-avatar tp-avatar--xsmall">
    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>

Avatar Badges

Deprecated

Avatar badges are deprecated. Status indicators such as "online" status, hired checkmarks, and notification alerts should be implemented as separate elements placed next to the avatar.

Hired

<div class="tp-avatar tp-avatar--xlarge">
    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
    <div class="tp-avatar__badge tp-avatar__badge--hired" />
</div>

Notification

<div class="tp-avatar tp-avatar--xlarge">
    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
    <div class="tp-avatar__badge tp-avatar__badge--notification">99</div>
</div>