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

import '@thumbtack/tp-ui-element-type';

Title

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

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

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

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

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

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

Body

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

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

<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

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

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

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

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

<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

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

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

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

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

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

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