HeadingText

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

<>
  <HeadingText>Heading 4 (default)</HeadingText>
</>

Basic

<>
  <HeadingText type={HeadingText.TYPE.HEADING_1}>Heading 1</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_2}>Heading 2</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_3}>Heading 3</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_4}>Heading 4</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_5}>Heading 5</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_6}>Heading 6</HeadingText>
</>

Changing semantic

<HeadingText
  type={HeadingText.TYPE.HEADING_1}
  tagType={HeadingText.TAG_TYPE.DIV}
>
  This is a div element styled as a h1
</HeadingText>

Props

children

node

Text to display.

className

string

Appends class names to the component. Should be used only for positioning and spacing purposes.

spacingType

enum[]

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
>
>

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

tagType

enum

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
>

testId

string

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.

type

enum

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
>

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

Basic

Changing semantic

Props

node

string

enum[]

object

enum

string

enum

Usage