Aperçu.

Was macht die Komponente?

Die Komponente stellt das SBB Logo mit korrektem Seitenverhältnis und Schutzraum dar.

Wann soll die Komponente eingesetzt werden?

• Um die Marke SBB auf einer Seite oder in einer Applikation zu zeigen.

Regeln.

• Das Logo wird im Header platziert. Dort sind Darstellung und Position vorgegeben.
• Das Logo darf weder verändert noch ausgeblendet werden.
• Das Logo wird nur einmal pro Seite dargestellt.
• Der Schutzraum um das Logo bleibt frei. Er ist standardmässig ideal; minimal oder ohne Schutzraum nur in Ausnahmefällen.
• Auf dunklem Hintergrund wird die negative Variante verwendet.

Éléments.

Ce composant comprend plusieurs éléments utilisables de manière autonome.

• sbb-logo
• sbb-logo-anniversary
• sbb-logo-cargo
• sbb-logo-cargo-international
• sbb-logo-elvetino

Spécification.

Web Components.

Le web component se trouve dans le paquet @sbb-esta/lyne-elements.

Documentation.

The logo components from Lyne are used as a wrapper for the SBB logos, and they ensure the correct aspect ratio and protective room.

To use the component, please define the desired height or width on the components.

/** Selector combination for demo purposes only. */
sbb-logo,
sbb-logo-cargo-international,
sbb-logo-cargo,
sbb-logo-elvetino {
  height: 20px;
}

<sbb-logo></sbb-logo>
<sbb-logo-cargo></sbb-logo-cargo>
<sbb-logo-cargo-international></sbb-logo-cargo-international>
<sbb-logo-elvetino></sbb-logo-elvetino>

Style.

All the components have a negative variant which can be set using the negative property.

<sbb-logo negative></sbb-logo>
<sbb-logo-cargo negative></sbb-logo-cargo>
<sbb-logo-cargo-international negative></sbb-logo-cargo-international>
<sbb-logo-elvetino negative></sbb-logo-elvetino>

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

<sbb-logo protective-room="minimal"></sbb-logo>
<sbb-logo-cargo protective-room="none"></sbb-logo-cargo>
<sbb-logo-cargo-international protective-room="minimal"></sbb-logo-cargo-international>
<sbb-logo-elvetino protective-room="none"></sbb-logo-elvetino>

Anniversary Logo.

The anniversary logo is an animated logo that can be used during the 125th anniversary year, 2027.
The intrinsic size of the logo matches the regular <sbb-logo>, so it can be used inside the
<sbb-header> in the same way as <sbb-logo>.

The anniversary logo does not support a protective room option. If a protective room is required,
a wrapping <div> with the desired dimensions and padding can be created instead.

For accessibility reasons, the text is set as the title of the image, which is read out by screen readers.

In order to correctly render the logo, the SBB font must be loaded and the global variables
of the logo must be included. When using a Lyne theme, this is automatically taken care of.

Animation.

The animation is triggered when the element is attached to the DOM. The initial delay is set to
3 seconds but can be configured via the --sbb-logo-anniversary-initial-delay CSS variable.

To prevent the animation from being triggered again on subsequent renders, consumers need to decide
when the animation is needed, or set the sbb-disable-animation class on the <sbb-logo-anniversary>
to display the end state immediately.

<sbb-logo-anniversary></sbb-logo-anniversary>

Angular.

Ce composant est également disponible pour Angular dans le paquet @sbb-esta/lyne-angular.

class: SbbLogoAnniversaryElement, sbb-logo-anniversary.

Properties.

CSS Properties.

class: SbbLogoCargoElement, sbb-logo-cargo.

Properties.

CSS Properties.

class: SbbLogoCargoInternationalElement, sbb-logo-cargo-international.

Properties.

CSS Properties.

class: SbbLogoElement, sbb-logo.

Properties.

CSS Properties.

class: SbbLogoElvetinoElement, sbb-logo-elvetino.

Properties.

CSS Properties.