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>

Changelog

Unreleased

1.4.2 - 2019-01-30

Changed

• [Patch] Use Apache License 2.0.

1.4.1 - 2018-11-27

Changed

• [Patch] Publish package to public NPM.