Skip to content
Home

Heading

Info
Demos
Properties

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

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

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

Code Editor
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 />)

SyntaxError: Unexpected token (1:3)

Combine with manual heading

[h1] h1

[h2] h2

Increase to h3

[h3] h3

Code Editor
<Heading.Level debug reset={1}>
  <Heading>h1</Heading>
  <Heading>h2</Heading>

  <H3 level="use">Increase to h3</H3>
  <Heading>h3</Heading>
</Heading.Level>