Usage
import { BlockText } from 'nr1'
Examples
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
attribute. Use it to target the component in unit and
E2E tests.
For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.
For example, my-nerdpack.some-element
.
Note: You might not see data-test-id
attributes as they are removed
from the DOM, to debug them pass a e2e-test
query parameter to the URL.
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,>