Heading
This component is used to render text headings in a variety of styles based on Soundstripe theme tokens.
Props
Need to get props here.
Usage
It's important to remember that heading size and heading level are not the same thing. To improve accessibility, Heading levels should be used to reflect the page structure and hierarchy. Size can be added as a prop.
By default, the Heading component renders at the h2 level and size.
<Heading>This the default h2 heading.</Heading>
The heading component lets us change level and size in order to follow both the page structure and layout design.
<>
<Heading level={5} size="h2">
This is a h5 heading sized up.
</Heading>
<Heading size="h5">This a h2 heading sized down.</Heading>
</>
Heading Size Settings
h1
Heading size one
Mobile: 32px/40px
Desktop: 40px/48px
h2
Heading size two
Mobile: 28px/36px
Desktop: 32px/40px