Zur Navigation Zum Inhalt Kontakt Menu Trova un componente Descrizione generale Lyne Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori funzionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Introduzione Base Componenti Introduzione Base Componenti Overview Releases Design Tokens Komponenten Introduzione Base Informazioni Senso & scopo Community Assets Istruzioni Power-Apps Banner pubblicitari digitali SAP Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili Deutsch English Message Implementation

The sbb-message component can be used to display a complex message.

Slots

It renders by default a sbb-title,
which can be provided via titleContent property or title slot.
Optionally, the user can provide other elements such as a subtitle paragraph via the subtitle slot,
a sbb-image to provide an image via the image slot,
a paragraph to provide an error code via the legend slot,
and a sbb-button to provide a custom action via the action slot.

<sbb-message title-content="Title" title-level="3">
  <sbb-image slot="image" [...]></sbb-image>
  <p slot="subtitle">Subtitle</p>
  <p slot="legend">Error code: 0001</p>
  <sbb-button slot="action" [...]>Action</sbb-button>
</sbb-message>

Accessibility

By default, the sbb-title has a visual level of 5 and an actual level of 3.
This can be changed by the user via the title-level property.
As all other elements are regularly slotted, their accessibility relies on the standard techniques provided
by the used components (e.g. alt-text and aria-label).

Properties

Name Attribute Privacy Type Default Description
titleContent title-content public string | undefined Content of title.
titleLevel title-level public SbbTitleLevel '3' Level of title, it will be rendered as heading tag (e.g., h3). Defaults to level 3.

Slots

Name Description
image Use this slot to provide a sbb-image component.
title Use this slot to provide title text for the component.
subtitle Use this slot to provide a subtitle, must be a paragraph.
legend Use this slot to provide a legend, must be a paragraph.
action Use this slot to provide a sbb-button.
Beispiele
Default
No Image
No Error Code
No Action
Slotted Title
HTML-Markup kopiert.
Playground

Please reload the page or try your search again later.

Error code: 0001

Bild Ja Nein Subtitle Ja Nein Legende Ja Nein Aktion Ja Nein Hintergrund White Milk Iron Charcoal Black
Trova un componente

Lyne

Impressum Contatto Impostazioni dei cookie