Typography styles are used throughout the UI. If used consistently they will help you maintain a hierarchy that is clear to your users.
Usage
import { HeadingText } from 'nr1'
Examples
Basic
ReferenceError: HeadingText is not defined
Basic
ReferenceError: HeadingText is not defined
Changing semantic
ReferenceError: HeadingText is not defined
Props
Text to display.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
Spacing property. Spacing is defined as a tuple of zero to four
values, which follow the same conventions as CSS properties like
margin
or padding
. To omit a value, use SPACING_TYPE.OMIT
.
<Array of<One ofHeadingText.SPACING_TYPE.EXTRA_LARGE,HeadingText.SPACING_TYPE.LARGE,HeadingText.SPACING_TYPE.MEDIUM,HeadingText.SPACING_TYPE.NONE,HeadingText.SPACING_TYPE.OMIT,HeadingText.SPACING_TYPE.SMALL,>
>
Inline style for custom styling.
Should be used only for positioning and spacing purposes.
Tag in which to wrap the text.
Useful for changing the semantic meaning of the text. This does not apply any style.
<One ofHeadingText.TAG_TYPE.DIV,HeadingText.TAG_TYPE.H1,HeadingText.TAG_TYPE.H2,HeadingText.TAG_TYPE.H3,HeadingText.TAG_TYPE.H4,HeadingText.TAG_TYPE.H5,HeadingText.TAG_TYPE.H6,>
Adds a data-test-id
.
Used to target the component in unit and e2e testing.
HeadingText .TYPE .HEADING_4
Type of text that you want to display.
This applies styles according to the type.
<One ofHeadingText.TYPE.HEADING_1,HeadingText.TYPE.HEADING_2,HeadingText.TYPE.HEADING_3,HeadingText.TYPE.HEADING_4,HeadingText.TYPE.HEADING_5,HeadingText.TYPE.HEADING_6,>
Methods
HeadingText.render
function () => undefined