Components

Type(React)

Styles for header and body text.

Version:14.18.2 View sourceChangelogReport 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.
24px (mobile) / 32px is the title size and can run as long as it needs to to fill up the space.
22px (mobile) / 24px is the title size and can run as long as it needs to to fill up the space.
20px is the title size and can run as long as it needs to to fill up the space.
18px is the title size and can run as long as it needs to to fill up the space.
16px is the title size and can run as long as it needs to to fill up the space.
14px is the title size and can run as long as it needs to to fill up the space.
12px is the title size and can run as long as it needs to to fill up the space.

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.

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.

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.

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

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