Heading
The Heading component can be used anywhere a heading should be displayed. By using different sizes, content can be clearly structured and pages can be presented effectively and varied. It separates styling from semantics and allows for flexibility.
Construction
Code
<kol-heading _level="1" _label="Inhalt einer H1-Überschrift"></kol-heading>
<kol-heading _level="2" _label="Inhalt einer H2-Überschrift"></kol-heading>
<kol-heading _level="3" _label="Inhalt einer H3-Überschrift"></kol-heading>
<kol-heading _level="4" _label="Inhalt einer H4-Überschrift"></kol-heading>
<kol-heading _level="5" _label="Inhalt einer H5-Überschrift"></kol-heading>
<kol-heading _level="6" _label="Inhalt einer H6-Überschrift"></kol-heading>
Example
Usage
The heading level is passed through the _level attribute. Levels 1 to 6 are possible
Best practices
- When using headings, pay attention to the recommended semantics for search engine optimization.
- Use headings of different sizes to create a meaningful structure for your content.
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. |