Title – digital.sbb.ch

Title

Info

What does the component do?

A title component is used to display headings and titles in different sizes and hierarchy levels in order to present content in a structured and clear manner.

When should the component be used?

To highlight the main heading of a page or section.
To present the structure and hierarchy of content clearly and comprehensibly.
To draw the user's attention to important information or topics.

Rules

Use the title component in different hierarchy levels (e.g. H1, H2, H3) to ensure a clear structure and readability.
Make sure that titles are used semantically correctly to improve accessibility and search engine optimisation (SEO).
Avoid too many titles on a page to ensure clarity.

Anatomy

Number	Type	Description	Optional	Info
1	Text	Title	No

Demo

Playground

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

Level

Background

White

Milk

Iron

Charcoal

Black

Examples

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.