package: '@thumbtack/tp-ui-component-avatar' kit: avatar/index.mdx platform: scss url: /components/avatar/scss/ mdxType: componentApi

import '@thumbtack/tp-ui-component-avatar';

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

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

<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>