Components

Avatar(SCSS)

Display user images and badges on Thumbtack.

Version:4.0.1 View sourceChangelogReport 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://www.placecage.com/130/130" class="tp-avatar__img" />
</div>

Large

<div class="tp-avatar tp-avatar--large">
<img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
</div>

Medium

<div class="tp-avatar tp-avatar--medium">
<img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
</div>

Small

<div class="tp-avatar tp-avatar--small">
<img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
</div>

Extra Small

<div class="tp-avatar tp-avatar--xsmall">
<img src="https://www.placecage.com/130/130" 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="//www.placecage.com/130/130" class="tp-avatar__img" />
<div class="tp-avatar__badge tp-avatar__badge--hired" />
</div>

Notification

99
<div class="tp-avatar tp-avatar--xlarge">
<img src="//www.placecage.com/130/130" class="tp-avatar__img" />
<div class="tp-avatar__badge tp-avatar__badge--notification">99</div>
</div>
Was this page helpful?

We use this feedback to improve the quality of our documentation.