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

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