Heading

Notes

A component for marking up page headings. Provide the component a tagName appropriate for the current document outline, and a standardized size. Additional visual styling can be accomplished by passing in text-* utility classes.

By separating the visual style and HTML element of heading elements, we can ensure that pages have appropriate, accessible document outlines without having to worry about changing visuals.

For more information, see Managing Typography on Large Apps and Abandoning Global Heading Styles.

Props

  • childrennode
  • classNamestring
  • elementReffunc
  • sizeoneOf('xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs')

    These map to standard text-* utility classes. An alternative to the size prop is to specify a text-* className, but headings will likely evolve to include refined letter-spacing and line-height per size, so it's best to stick with the size props.

  • tagNameany*

    The HTML tagName or React component to be rendered. This should almost always be an h1h6 element that forms a correct document outline.

Heading Size XL

Heading Size XL details

  • SizeheadingSizeXl
  • REM3.1 (31px)

Heading Size Lg

Heading Size Lg details

  • SizeheadingSizeLg
  • REM2.6 (26px)
  • ModifiersBold

Heading Size Md

Heading Size Md details

  • SizeheadingSizeMd
  • REM2.2 (22px)

Heading Size Sm

Heading Size Sm details

  • SizeheadingSizeSm
  • REM1.9 (19px)

Heading Size Xs

Heading Size Xs details

  • SizeheadingSizeXs
  • REM1.7 (17px)
  • ModifiersBold

Heading Size Xxs

Heading Size Xxs details

  • SizeheadingSizeXxs
  • REM1.4 (14px)
  • ModifiersUppercase & Bold

FormHeading

Notes

A pre-stylized component for form headings that reacts to themes. Provide the component a tagName appropriate for the current document outline. Additional visual styling can be accomplished by passing in font-* utility classes.

Any additional props will be passed through to the component.

Props

  • childrennode
  • classNamestring
  • tagNamestring['h2']

    The HTML tagName or React component to be rendered. This should almost always be an h1h6 element that forms a correct document outline.

Default

Themed Form Headings