Components

Type(React)

Styles for header and body text.

Version:	`14.18.2` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { Title, Text } from '@thumbtack/thumbprint-react';`

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.

<Title size={1}>
    28px (mobile) / 40px is the title size and can run as long as it needs to to fill up the space.
</Title>

<Title size={1}>
    28px (mobile) / 40px is the title size and can run as long as it needs to to fill up the space.
</Title>

24px (mobile) / 32px is the title size and can run as long as it needs to to fill up the space.

<Title size={2}>
    24px (mobile) / 32px is the title size and can run as long as it needs to to fill up the space.
</Title>

<Title size={2}>
    24px (mobile) / 32px is the title size and can run as long as it needs to to fill up the space.
</Title>

22px (mobile) / 24px is the title size and can run as long as it needs to to fill up the space.

<Title size={3}>
    22px (mobile) / 24px is the title size and can run as long as it needs to to fill up the space.
</Title>

<Title size={3}>
    22px (mobile) / 24px is the title size and can run as long as it needs to to fill up the space.
</Title>

20px is the title size and can run as long as it needs to to fill up the space.

<Title size={4}>
    20px is the title size and can run as long as it needs to to fill up the space.
</Title>

<Title size={4}>
    20px is the title size and can run as long as it needs to to fill up the space.
</Title>

18px is the title size and can run as long as it needs to to fill up the space.

<Title size={5}>
    18px is the title size and can run as long as it needs to to fill up the space.
</Title>

<Title size={5}>
    18px is the title size and can run as long as it needs to to fill up the space.
</Title>

16px is the title size and can run as long as it needs to to fill up the space.

<Title size={6}>
    16px is the title size and can run as long as it needs to to fill up the space.
</Title>

<Title size={6}>
    16px is the title size and can run as long as it needs to to fill up the space.
</Title>

14px is the title size and can run as long as it needs to to fill up the space.

<Title size={7}>
    14px is the title size and can run as long as it needs to to fill up the space.
</Title>

<Title size={7}>
    14px is the title size and can run as long as it needs to to fill up the space.
</Title>

12px is the title size and can run as long as it needs to to fill up the space.

<Title size={8}>
    12px is the title size and can run as long as it needs to to fill up the space.
</Title>

<Title size={8}>
    12px is the title size and can run as long as it needs to to fill up the space.
</Title>

Text

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.

<Text size={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.
</Text>

<Text size={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.
</Text>

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.

<Text size={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.
</Text>

<Text size={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.
</Text>

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.

<Text size={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.
</Text>

<Text size={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.
</Text>

With custom classes

You can use the className prop to add additional styles to “Title” and “Text” components. It’s not possible to override the styles defined by this component. This includes font-weight in Title as well as font-size and line-height in Title and Text.

If you need more flexibility, we recommend either using the “Type” tokens in Thumbprint Tokens or working with a designer to use one of the styles on this page.

This text is underlined and right aligned

<Text size={1} className="underline tr">
    This text is underlined and right aligned
</Text>

<Text size={1} className="underline tr">
    This text is underlined and right aligned
</Text>

Props

Title

children
required
Text to render.
Type
React.ReactNode
size
required
Size level of the text.
Type
This prop can be one of the following 8 types:
1
2
3
4
5
6
7
8
className
Allows you to pass in additional styles to apply to the text. It is intentionally not possible to overwrite font-size, line-height, and font-weight. If you need to do so, consider using the “Type” tokens from Thumbprint Tokens or working with a designer to use one of the styles on this page.
Type
string
headingLevel
Level of the heading element (h1 to h6) to render. If omitted, a heading tag is not used, and a div is used instead.
Type
This prop can be one of the following 6 types:
1
2
3
4
5
6
id
Adds a HTML id attribute to the text. This is used for linking to a URL fragment.
Type
string
dataTestId
A selector to hook into the React component for use in automated testing environments.
Type
string
dataTest
deprecated
A selector to hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
Type
string

Text

children
Text to render.
Type
React.ReactNode
size
Size level of the text.
Type
This prop can be one of the following 3 types:
1
2
3
Default
1
className
Allows you to pass in additional styles to apply to the text. It is intentionally not possible to overwrite font-size and line-height. If you need to do so, consider using the “Type” tokens from Thumbprint Tokens or working with a designer to use one of the styles on this page.
Type
string
elementName
Name of the DOM element to render. Defaults to p for a paragraph tag.
Type
unknown
Default
'p'
dataTestId
A selector to hook into the React component for use in automated testing environments.
Type
string
dataTest
deprecated
A selector to hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
Type
string