# Title

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Display
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/title/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-title--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/title/overview (API: https://lyne-angular.app.sbb.ch/angular/components/title/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-64
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/title

## Elemente

- `sbb-title`

## Übersicht

### Was macht die Komponente?
Die Title-Komponente stellt Überschriften in sechs Hierarchiestufen (H1–H6) dar und gliedert Inhalte klar.

### Wann soll die Komponente eingesetzt werden?
* Für die Hauptüberschrift einer Seite oder eines Abschnitts.
* Um die Struktur und Hierarchie von Inhalten abzubilden.

### Regeln.
* Die Stufe (`level`) richtet sich nach der Struktur der Seite, nicht nach der gewünschten Grösse. Keine Stufen überspringen, pro Seite nur eine H1.
* Weicht die Darstellung von der Semantik ab, wird die optische Grösse mit `visualLevel` gesetzt.
* Auf dunklem Hintergrund die negative Variante verwenden.
* Zu viele Titel auf einer Seite vermeiden.

## Implementation (Web Components, Englisch)

The `<sbb-title>` is a component which renders a heading element according to the provided `level` (default: `1`).

```html
<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`).

```html
<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.

```html
<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.

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/title/api.md