Was macht die Komponente?
Eine Title-Komponente dient dazu, Überschriften und Titel in verschiedenen Größen und Hierarchiestufen darzustellen, um Inhalte strukturiert und übersichtlich zu präsentieren.
Wann soll die Komponente eingesetzt werden?
- Um die Hauptüberschrift einer Seite oder eines Abschnitts hervorzuheben.
- Um die Struktur und Hierarchie von Inhalten klar und verständlich darzustellen.
- Um die Aufmerksamkeit der Nutzenden auf wichtige Informationen oder Themen zu lenken.
Regeln
- Verwende die Title-Komponente in verschiedenen Hierarchiestufen (z.B. H1, H2, H3), um eine klare Struktur und Lesbarkeit zu gewährleisten.
- Achte darauf, dass Titel semantisch korrekt eingesetzt werden, um die Barrierefreiheit und Suchmaschinenoptimierung (SEO) zu verbessern.
- Vermeide zu viele Titel auf einer Seite, um die Übersichtlichkeit zu gewährleisten.
| Nummer | Typ | Beschreibung | Optional | Hinweis |
|---|---|---|---|---|
| 1 | Text | Title | Nein |
Spielwiese
Beispiele
The sbb-title is a component which renders a heading element according to the provided level (default: 1).
<sbb-title>Hello</sbb-title>
Style
In scenarios where the visual representation needs to be different from the semantic meaning of the title level,
it is possible to use the visualLevel property.
The available values for both level and visualLevel are the numbers from 1 to 6 (h1 to h6).
<sbb-title level="3" visual-level="4">Hi!</sbb-title>
The component has a negative variant which can be set with the self-named property.
<sbb-title negative>Negative</sbb-title>
As a default the sbb-title contains spacing on top and bottom on the host.
This can be removed or customized via simple CSS rules.
Accessibility
If the title is needed, but it must to not be displayed, it's possible to use the visuallyHidden property to hide it.
<sbb-title visually-hidden>Screen-reader only.</sbb-title>
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
level |
level |
public | SbbTitleLevel |
'1' |
Title level |
negative |
negative |
public | boolean |
false |
Negative coloring variant flag. |
visualLevel |
visual-level |
public | SbbTitleLevel | undefined |
Visual level for the title. Optional, if not set, the value of level will be used. | |
visuallyHidden |
visually-hidden |
public | boolean | undefined |
Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true. |
CSS Properties
| Name | Default | Description |
|---|---|---|
--sbb-title-margin-block-end |
var(--sbb-spacing-responsive-s) |
Margin block end of the title. |
--sbb-title-margin-block-start |
var(--sbb-spacing-responsive-m) |
Margin block start of the title. |
Slots
| Name | Description |
|---|---|
| Use the unnamed slot to display the title. |