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.

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.

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.).

Props

"none" | "left" | "center" | "right";

"left"

string;

string;

string;

string;

ReactNode;

string;

string;

"1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;

1

string;

Alternative components

• <Text>: If you want to display a simple text without any headline structure.