Preview loads on approachPreview loads on approach
Exact source · heading-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {VStack} from '@astryxdesign/core/Layout';
import {Heading} from '@astryxdesign/core/Text';
export default function HeadingShowcase() {
return (
<VStack gap={2} hAlign="start">
<Heading level={1}>Heading Level 1</Heading>
<Heading level={2}>Heading Level 2</Heading>
<Heading level={3}>Heading Level 3</Heading>
<Heading level={4}>Heading Level 4</Heading>
<Heading level={5}>Heading Level 5</Heading>
<Heading level={6}>Heading Level 6</Heading>
</VStack>
);
}
Usage
Semantic heading component that renders h1-h6 elements with themed styling, themed sizing via type scale tokens, and line-clamp truncation.
Typed props
Prop
Type and behavior
level
1 | 2 | 3 | 4 | 5 | 6 · required
Heading level. Determines the semantic HTML element (h1-h6) and the visual styling from the theme (unless type is set).
type
'display-1' | 'display-2' | 'display-3'
Display type variant. Overrides the visual styling from level with display-scale sizing (larger, lighter weight, tighter line-height). Themes may add custom visual types. The level still determines the HTML element for accessibility. Use for hero banners, marketing headlines, and data callouts.
weight
'normal' | 'medium' | 'semibold' | 'bold'
Explicit font-weight override. Wins over the selected visual type or heading-level default.
Controls tooltip behavior for truncated text. true shows the tooltip at the default position, false disables it, or a placement string ('above' | 'below' | 'start' | 'end') sets a specific position.
wordBreak
'break-word' | 'break-all'
Word break behavior when truncating. Defaults to 'break-all' for single-line truncation, 'break-word' otherwise.
