Components

Type(SCSS)

Styles for header and body text.

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

Title

These type styles uses variables from Thumbprint Tokens. You can refer to that documentation for font-size, line-height, and font-weight values.

28px (mobile) / 40px is the title size and can run as long as it needs to to fill up the space.
<div class="tp-title-1">
28px (mobile) / 40px is the title size and can run as long as it needs to to fill up the space.
</div>
24px (mobile) / 32px is the title size and can run as long as it needs to to fill up the space.
<div class="tp-title-2">
24px (mobile) / 32px is the title size and can run as long as it needs to to fill up the space.
</div>
22px (mobile) / 24px is the title size and can run as long as it needs to to fill up the space.
<div class="tp-title-3">
22px (mobile) / 24px is the title size and can run as long as it needs to to fill up the space.
</div>
20px is the title size and can run as long as it needs to to fill up the space.
<div class="tp-title-4">
20px is the title size and can run as long as it needs to to fill up the space.
</div>
18px is the title size and can run as long as it needs to to fill up the space.
<div class="tp-title-5">
18px is the title size and can run as long as it needs to to fill up the space.
</div>
16px is the title size and can run as long as it needs to to fill up the space.
<div class="tp-title-6">
16px is the title size and can run as long as it needs to to fill up the space.
</div>
14px is the title size and can run as long as it needs to to fill up the space.
<div class="tp-title-7">
14px is the title size and can run as long as it needs to to fill up the space.
</div>
12px is the title size and can run as long as it needs to to fill up the space.
<div class="tp-title-8">
12px is the title size and can run as long as it needs to to fill up the space.
</div>

Body

16px is the text size that forms sentences and can run as long as it needs to to fill up the space. It should still look good.
<div class="tp-body-1">
16px is the text size that forms sentences and can run as long as it needs to to fill up the
space. It should still look good.
</div>
14px is the text size that forms sentences and can run as long as it needs to to fill up the space. It should still look good.
<div class="tp-body-2">
14px is the text size that forms sentences and can run as long as it needs to to fill up the
space. It should still look good.
</div>
12px is the text size that forms sentences and can run as long as it needs to to fill up the space. It should still look good.
<div class="tp-body-3">
12px is the text size that forms sentences and can run as long as it needs to to fill up the
space. It should still look good.
</div>

Deprecated body text

20px (mobile) / 24px is the text size that forms sentences and can run as long as it needs to to fill up the space. It should still look good.
<div class="tp-text-1">
20px (mobile) / 24px is the text size that forms sentences and can run as long as it needs to to
fill up the space. It should still look good.
</div>
20px is the text size that forms sentences and can run as long as it needs to to fill up the space. It should still look good.
<div class="tp-text-1--static">
20px is the text size that forms sentences and can run as long as it needs to to fill up the
space. It should still look good.
</div>
16px is the text size that forms sentences and can run as long as it needs to to fill up the space. It should still look good.
<div class="tp-text-2--static">
16px is the text size that forms sentences and can run as long as it needs to to fill up the
space. It should still look good.
</div>
14px is the text size that forms sentences and can run as long as it needs to to fill up the space. It should still look good.
<div class="tp-text-3--static">
14px is the text size that forms sentences and can run as long as it needs to to fill up the
space. It should still look good.
</div>
12px is the text size that forms sentences and can run as long as it needs to to fill up the space. It should still look good.
<div class="tp-text-4--static">
12px is the text size that forms sentences and can run as long as it needs to to fill up the
space. It should still look good.
</div>

Deprecated Headings

32px (mobile) / 48px is our heading size and it too may run long and wrap to a second line but we should be ready for that.
<div class="tp-heading-1">
32px (mobile) / 48px is our heading size and it too may run long and wrap to a second line but
we should be ready for that.
</div>
30px (mobile) / 40px is our heading size and it too may run long and wrap to a second line but we should be ready for that.
<div class="tp-heading-2">
30px (mobile) / 40px is our heading size and it too may run long and wrap to a second line but
we should be ready for that.
</div>
24px (mobile) / 32px is our heading size and it too may run long and wrap to a second line but we should be ready for that.
<div class="tp-heading-3">
24px (mobile) / 32px is our heading size and it too may run long and wrap to a second line but
we should be ready for that.
</div>
20px (mobile) / 24px is our heading size and it too may run long and wrap to a second line but we should be ready for that.
<div class="tp-heading-4">
20px (mobile) / 24px is our heading size and it too may run long and wrap to a second line but
we should be ready for that.
</div>
16px (mobile) / 20px is our heading size and it too may run long and wrap to a second line but we should be ready for that.
<div class="tp-heading-5">
16px (mobile) / 20px is our heading size and it too may run long and wrap to a second line but
we should be ready for that.
</div>
14px (mobile) / 16px is our heading size and it too may run long and wrap to a second line but we should be ready for that.
<div class="tp-heading-6">
14px (mobile) / 16px is our heading size and it too may run long and wrap to a second line but
we should be ready for that.
</div>