Heading

This documentation is currently being revised and is in beta status. Content may still change.

This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

Synonyms: Heading, Title, Heading Level, H1–H6

Description: The Heading component is used for semantically structured organization of page content. It allows combining different heading levels (1–6) and separates styling from semantic meaning. This supports accessibility and search engine optimization.

Example

Renders a heading at level 1 without any optional properties set. Code can be expanded.

<KolHeading _label="Heading Level 1" _level={1} />

Accessibility

• Semantic structure: The component uses native HTML heading elements (H1–H6) to correctly represent the document structure for assistive technologies.
• Logical nesting: Headings should be logically nested (H1 → H2 → H3 etc.) to ensure a consistent document outline.
• Label attribute: The required _label attribute contains the heading text and is read aloud by screen readers.
• Search engine optimization: Properly structured headings support SEO and improve the discoverability of content.
• Flexible rendering: Using _level="0" renders the component as visually bold text while keeping the semantics neutral.

Links and References

Usage

Best Practices / Recommendations

• Hierarchical structure: Start with a single H1 heading per page and use H2, H3 etc. for sub-categories. Avoid skipping levels (e.g. H1 directly to H3).
• Meaningful text: Use clear, concise heading text that precisely describes the content of the following section.
• Not for styling: Do not use headings solely for their visual size. Use CSS or other components for purely decorative purposes instead.
• Secondary headings: The optional _secondaryHeadline can be used for subtitles or supplementary information.
• Support search engines: Relevant keywords in headings can support SEO, but should not feel forced.

Use Cases

• Page header: Main heading of a page or content area
• Section structure: Organizing longer content into thematic sections
• Dialog and modal titles: Headings for modal windows and dialogs
• Article headings: Titles of articles, blog posts, or news items
• Subsections: Structuring complex content across multiple levels

Construction / Technique

Playground

<KolHeading _label="Heading" _level={1} />

Features

Standard headings

Headings at different levels from level 1 to 6:

<KolHeading _label="Level 1 Heading" _level={1} />

With secondary headline

A main heading can be combined with a secondary headline:

<KolHeading _label="Main Heading" _level={1} _secondaryHeadline="Subheading or Subtitle" />

Heading without semantic level

Using _level="0" renders the component without a semantic heading element and appears visually as bold text:

<KolHeading _label="Text without heading semantics" _level={0} />

API

Properties

Property	Attribute	Description	Type	Default
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.	string	undefined
_level	_level	Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.	0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined	0
_secondaryHeadline	_secondary-headline	Defines the text of the secondary headline.	string | undefined	undefined

Slots

Slot	Description
	Inhalt der Überschrift.

---