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 { BlockText } from 'nr1'
Examples
Basic
ReferenceError: BlockText is not defined
Types
ReferenceError: BlockText is not defined
Changing semantic
ReferenceError: BlockText 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 ofBlockText.SPACING_TYPE.EXTRA_LARGE,BlockText.SPACING_TYPE.LARGE,BlockText.SPACING_TYPE.MEDIUM,BlockText.SPACING_TYPE.NONE,BlockText.SPACING_TYPE.OMIT,BlockText.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 ofBlockText.TAG_TYPE.DIV,BlockText.TAG_TYPE.P,>
Adds a data-test-id
.
Used to target the component in unit and e2e testing.
BlockText .TYPE .NORMAL
Type of text that you want to display.
This applies styles according to the type.
<One ofBlockText.TYPE.NORMAL,BlockText.TYPE.PARAGRAPH,>
Methods
BlockText.render
function () => undefined