Components
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'; |
These type styles uses variables from Thumbprint Tokens. You can refer to that documentation for font-size, line-height, and font-weight values.
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.
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
children
Text to render.
React.ReactNode
size
Size level of the text.
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.
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.
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.
string
dataTestId
A selector to hook into the React component for use in automated testing environments.
string
dataTest
A selector to hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
string
children
Text to render.
React.ReactNode
size
Size level of the text.
This prop can be one of the following 3 types:
1
2
3
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.
string
elementName
Name of the DOM element to render. Defaults to p
for a paragraph tag.
unknown
'p'
dataTestId
A selector to hook into the React component for use in automated testing environments.
string
dataTest
A selector to hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
string