Thumbprint logo

Components

Type

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>