Title. Overview

Preview.

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

What does the component do?

The title component displays headings in six hierarchy levels (H1–H6) and structures content clearly.

When should the component be used?

  • For the main heading of a page or section.
  • To represent the structure and hierarchy of content.
 Usage

Rules.

  • The level (level) follows the structure of the page, not the desired size. Do not skip levels; use only one H1 per page.
  • If the appearance differs from the semantics, set the visual size with visualLevel.
  • Use the negative variant on dark backgrounds.
  • Avoid too many titles on a page.

Specification.

Open in Figma
Examples H 1.
Try it out on Storybook Show HTML
H 1 Negative.
Try it out on Storybook Show HTML
H 2.
Try it out on Storybook Show HTML
H 3.
Try it out on Storybook Show HTML
H 4.
Try it out on Storybook Show HTML
H 5.
Try it out on Storybook Show HTML
H 6.
Try it out on Storybook Show HTML
H 6 Visual Level.
Try it out on Storybook Show HTML
Lean Size.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

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.

Lean theme.

With the lean theme, the title is given smaller sizes and spacings.

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples API

class: SbbTitleElement, sbb-title.

Properties.

Name Attribute Privacy Type Default Description
level level public '1' | '2' | '3' | '4' | '5' | '6' '1' Title level
negative negative public boolean false Negative coloring variant flag.
visualLevel visual-level public '1' | '2' | '3' | '4' | '5' | '6' | null null Visual level for the title. Optional, if not set, the value of level will be used.

Slots.

Name Description
Use the unnamed slot for the content of the title.