Type

Styles for header and body text

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={6}>
  16px 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>

<Title size={8}>
  12px is the title size and can run as long as it needs to to fill up the space.
</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
  className="underline tr"
  size={1}
>
  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
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
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
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
React.ReactHTML
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