Components

Type(React)

Styles for header and body text.

Version:7.0.1 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.
<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>
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>
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>
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>
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>
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>
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>

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>

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>

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>

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>

Props

Title

  • children

    Text to render.

    Type
    node
    Default
    undefined
  • size
    required

    Size level of the text.

    Type
    oneOf([
      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
    Default
    undefined
  • 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
    oneOf([
      1,
      2,
      3,
      4,
      5,
      6,
    ])
    Default
    undefined
  • id

    Adds a HTML id attribute to the text. This is used for linking to a URL fragment.

    Type
    string
    Default
    undefined
  • dataTest

    A selector hook into the React component for use in automated testing environments.

    Type
    string
    Default
    undefined

Text

  • children

    Text to render.

    Type
    node
    Default
    undefined
  • size

    Size level of the text.

    Type
    oneOf([
      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
    Default
    undefined
  • elementName

    Name of the DOM element to render. Defaults to p for a paragraph tag.

    Type
    string
    Default
    'p'
  • dataTest

    A selector hook into the React component for use in automated testing environments.

    Type
    string
    Default
    undefined