Skip to content

Heading

Demos

NB: All the demos do use <Heading.Level reset={1} .... This way every demo does reset the global level handling. You don't need that in your app.

Default headings

[h1] h1

[h2] h2

[h3] h3

[h4] h4

[h3] h3

[h2] h2

[h4] h4

<Heading.Level debug reset={1}>
<Heading>h1</Heading>
<Heading>h2</Heading>
<Heading increase>h3</Heading>
<Heading increase>h4</Heading>
<Heading decrease>h3</Heading>
<Heading level="2" size="x-large">
h2
</Heading>
<Heading skip_correction level={4}>
h4
</Heading>
</Heading.Level>

Heading level context

[h1] h1

[h2] h2

[h3] h3

[h3] h3

[h3] h3

[h2] h2

[h2] h2

[h3] h3

[h3] h3

<Heading.Level debug reset={1}>
<Heading>h1</Heading>
<Heading>h2</Heading>
<Heading.Increase>
<Heading>h3</Heading>
<Heading>h3</Heading>
</Heading.Increase>
<Heading inherit>h3</Heading>
<Heading.Decrease inherit>
<Heading>h2</Heading>
<Heading>h2</Heading>
<Heading increase>h3</Heading>
<Heading>h3</Heading>
</Heading.Decrease>
</Heading.Level>

Level isolation

[h1] h1

[h2] h2

[h2] h2

const App = () => {
const [showHeading, setShowHeading] = React.useState(false)
return (
<Heading.Level debug reset={1}>
<Heading>h1</Heading>
<Heading>h2</Heading>
<Heading.Increase>
<ToggleButton
text="Toggle h3"
checked={showHeading}
onChange={() => setShowHeading((c) => !c)}
/>
{showHeading && (
<>
<Heading>h3</Heading>
<Heading>h3</Heading>
<Heading>h3</Heading>
</>
)}
</Heading.Increase>
<Heading.Level>
<Heading>h2</Heading>
</Heading.Level>
</Heading.Level>
)
}
render(<App />)

Combine with manual heading

[h1] h1

[h2] h2

Increase to h3

[h3] h3

<Heading.Level debug reset={1}>
<Heading>h1</Heading>
<Heading>h2</Heading>
<H3 level="use">Increase to h3</H3>
<Heading>h3</Heading>
</Heading.Level>