Headline
The <Headline>
component is used to create headings for different sections of content. It is a versatile component that can be styled and structured to fit various design needs while maintaining semantic HTML structure for accessibility and SEO.
Anatomy
A <Headline>
component typically consists of a headline element (like <h1>
, <h2>
, etc.) that serves as the title for a section of content.
Appearance
The appearance of a component can be customized using the variant
and size
props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
Your Tickets for Summer Festival 2025
Property | Type | Description |
---|---|---|
variant | - | The available variants of this component. |
size | level-1 | level-2 | level-3 | level-4 | level-5 | level-6 | The available sizes of this component. |
Usage
You should use a <Headline>
when introducing a new section or page, establishing a clear visual hierarchy, or structuring content with proper semantic headlines like <h1>
to <h6>
. It helps guide the reader, improves accessibility for screen readers, and ensures consistent styling across the application. Use it whenever a piece of text needs to stand out as a title or headline within your layout.
Your Tickets for Summer Festival 2025
Hierarchy
The hierarchy in the <Headline>
component is essential for both usability and accessibility. Visually, it guides users through the content by clearly indicating the structure of a page—larger, more prominent headlines signal more important sections, while smaller ones denote subsections.
You should use the level
prop (or size
) to define the headline level, which corresponds to HTML headline tags (h1
, h2
, etc.).
Use headline levels in sequential order that matches the content structure.
Avoid skipping headline levels (e.g., from <h1>
directly to <h4>
) to keep your content hierarchy meaningful and accessible.
Props
align?
"none" | "left" | "center" | "right";
"left"
aria-describedby?
string;
aria-details?
string;
aria-label?
string;
aria-labelledby?
string;
children?
ReactNode;
color?
string;
id?
string;
level?
"1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
1
slot?
string;
Alternative components
<Text>
: If you want to display a simple text without any headline structure.