Heading

Use the Heading to render semantic HTML heading elements (h1, h2, etc.). The component allows you to independently define both the visual and the semantic level of the heading.

OverviewProperties

Use the Heading to render semantic HTML heading elements (h1, h2, etc.). The component allows you to independently define both the visual and the semantic level of the heading.

Import

import { Heading } from '@dynatrace/strato-components/typography';

Use cases

CodeSandbox

Set the visual level

To change the visual level of the Heading component, set the level property. The visual level and the semantic level will match if not set explicitly. The default value is 1, which renders an h1 tag with the highest visual importance.

CodeSandbox

Polymorph to an HTML tag

Use the as prop to polymorph the Heading to the desired HTML tag (h1-h6), which sets the semantic level independently of the visual level.

CodeSandbox