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

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