Skip to main content

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

    Import​

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

    Demo​

    CodeSandbox

    Set 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 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
    Still have questions?
    Find answers in the Dynatrace Community