Preview.

What does the component do?

The component displays the SBB logo with the correct aspect ratio and protective room.

When should the component be used?

• To show the SBB brand on a page or in an application.

Rules.

• The logo is placed in the header. Its presentation and position are predefined there.
• The logo must neither be changed nor hidden.
• The logo is displayed only once per page.
• The protective room around the logo must stay free. The ideal protective room is the default; use minimal or none only in exceptional cases.
• On dark backgrounds, use the negative variant.

Elements.

This component includes several elements that can be used on their own.

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

Specification.

Web Components.

The web component is in the package @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.

This component is also available for Angular in the package @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.