Heading

OverviewProperties

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