Skip to main content

Heading

Use Heading to render semantic HTML heading elements (h1, h2, etc.).

Import

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

Use cases

By setting the level property of the Heading component, the semantic level and the visual level will match if not set explicitly. The default value is either h1 or the current context level.

CodeSandbox

Polymorph to an HTML tag

For semantic reasons the Heading component can be polymorphed into an actual heading HTML tag (h1-h6) using the as property.

CodeSandbox

Props

HeadingProps

extends,
NameTypeDefaultDescription
level?
1The visual level of the heading.
as?
'h1'The polymorphed HTML tag that determines the semantic level of the heading.
Still have questions?
Find answers in the Dynatrace Community