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.

import { Headline, Text } from '@marigold/components';export default () => (  <div>    <Headline level="3">Your Tickets for Summer Festival 2025</Headline>    <Text>      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.    </Text>  </div>);

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

Headline

Alternative components

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