H (heading)

Like a plain <h1|h2|h3..>-element, but the heading level is set via a prop. Typically used in other components that have a dynamic heading level (accessibility reasons).

Basic usage

The only difference between the <H> and <h1>, <h2>, ...<h5> is that semantic level is given in the level-prop:

<H level={1}>Level one</H>
<H level={2}>Level one</H>

Within a component

function MessageComponent({ headingLevel, heading, message }) {
  return (
    <div>
      <H level={headingLevel}>
        {heading}
      </H>
      <p>{message}</p>
    </div>
  )
}

Add style

Add style as you would an ordinary base-html-element in react, via the className-prop: