Title – digital.sbb.ch

Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili Deutsch

English

Title

Info

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.

Anatomie

Nummer	Typ	Beschreibung	Optional	Hinweis
1	Text	Title	Nein

Demo

Spielwiese

Data without insights are trivial, and insights without action are pointless

Level

Hintergrund

White

Milk

Iron

Charcoal

Black

Beispiele

H 1

H 1 Negative

H 2

H 3

H 4

H 5

H 6

H 6 Visual Level

HTML-Markup kopiert.

Implementation

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.