Headline

The title of a content section

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.

Variant
Size
The selected theme does not has any options for "variant".

Your Tickets for Summer Festival 2025

PropertyTypeDescription
variant-The available variants of this component.
sizelevel-1 | level-2 | level-3 | level-4 | level-5 | level-6The 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

Below you’ll find all your purchased tickets and event details. Please present your QR code at the entrance. If you have any questions, contact our support team.

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

Do

Use headline levels in sequential order that matches the content structure.

Don't

Avoid skipping headline levels (e.g., from <h1> directly to <h4>) to keep your content hierarchy meaningful and accessible.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
align?
"none" | "left" | "center" | "right";
Set the text alignment for the element.
Defaults to:
"left"
aria-describedby?
string;
Identifies the element (or elements) that describes the object.
aria-details?
string;
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label?
string;
Defines a string value that labels the current element.
aria-labelledby?
string;
Identifies the element (or elements) that labels the current element.
children?
ReactNode;
Children of the component.
color?
string;
Set the color of the headline.
id?
string;
The element's unique identifier. See MDN.
level?
"1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
Set a different level.
Defaults to:
1
slot?
string;
A slot to place the element in.

Alternative components

  • <Text>: If you want to display a simple text without any headline structure.
Last update: 7 minutes ago