Vorschau.

Was macht die Komponente?

Die Komponente zeigt das SBB-Signet an und stellt Seitenverhältnis und Schutzraum sicher. Sie ist Bestandteil des Logos.

Wann soll die Komponente eingesetzt werden?

• Wenn nur das Signet ohne Schriftzug benötigt wird, z.B. im Header mit kleiner Grösse.
• Für das vollständige Logo wird die Logo-Komponente verwendet.

Regeln.

• Das Signet darf nicht verändert werden.
• Die Grösse (Höhe oder Breite) wird am Element festgelegt. Der Schutzraum wird über die Variante bestimmt (ideal, minimal, panel, none).
• Setze eine Beschriftung für Screenreader, wenn das Signet als eigenständiges Element erscheint.

Spezifikation.

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Dokumentation.

The <sbb-signet> is used as a wrapper for the SBB signet and ensures his aspect ratio and protective room.
To use the component, please define the desired height or width on <sbb-signet>.

<style>
  sbb-signet {
    height: 20px;
  }
</style>
<sbb-signet></sbb-signet>

Style.

The aspect ratio of the logo can be changed using the protectiveRoom property.
Possible values are ideal (default), minimal, panel and none.

With panel value, the component is displayed with a left padding, similar to the <sbb-logo> component but without the text.
This is useful, for example, in the <sbb-header> with size='s'.

<sbb-signet protective-room="none"></sbb-signet>

<sbb-signet protective-room="minimal"></sbb-signet>

<sbb-signet protective-room="panel"></sbb-signet>

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

class: SbbSignetElement, sbb-signet.

Properties.

CSS Properties.