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>