@thumbtack/tp-ui-react-type v2.0.0

package: '@thumbtack/tp-ui-react-type' kit: element/type.yaml platform: react

url: /api/components/element/type/react/

import Alert from './../../../../www/src/components/alert';

Title

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

<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={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={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={4}>
    20px 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>

<Title size={5} headingLevel={6}>
    Allows rendering a custom heading element
</Title>

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>

<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={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.

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