Getting Started

Foundations

ColorPaletteTypographyIconographyThemingBreakpoints

Core Components

AbsoluteBackgroundImageBadgeBannerBlockLinkBoxButtonCardCheckboxCloseButtonContainerDividerFlagFlexFormFieldGenericBannerHeadingHideHugIconIconButtonIconFieldImageInputInputGroupLabelLinkPlaceholderImageProgressBarRadioRatingBadgeRelativeSelectStampSwatchTextTextAreaToggleBadgeTooltipTruncate

Modal Components

ModalScrollLock

Popover

Popover

Slider

RangeSliderSlider

Utilities

borderscolorgetPaletteColorgetTextColorOngetLinkStylesOn

Resources

MotionLayoutContributingGitHub

Heading

The Heading component is an extension of the Text component intended for headings.

Extends: Text

Hello

<Heading>Hello</Heading>

HTML Heading Elements

By default, the Heading component renders an <h3> element with default font size 24px. To use a different heading level, use the following:

This is a h1 element

This is a h2 element

This is a h3 element

This is a h4 element

This is a h5 element
This is a h6 element
<Heading.h1>This is a h1 element</Heading.h1>
<Heading.h2>This is a h2 element</Heading.h2>
<Heading.h3>This is a h3 element</Heading.h3>
<Heading.h4>This is a h4 element</Heading.h4>
<Heading.h5>This is a h5 element</Heading.h5>
<Heading.h6>This is a h6 element</Heading.h6>

Examples

Hello

<Heading.h1>Hello</Heading.h1>
Hello
<Heading.h5 m={3} bold>Hello</Heading.h5>

Purple

<Heading.h2 color='purple'>Purple</Heading.h2>
GenericBanner
Hide