# Logo Komponente des SBB Design Systems Lyne. - Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`) - Aufbau: mehrere eigenständige Elemente - Kategorien: Display - Status: Gestaltungsrichtlinien vollständig ## Links - Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/logo/ - Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-logo--docs - Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/logo/overview (API: https://lyne-angular.app.sbb.ch/angular/components/logo/api) - Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-38 - GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/logo ## Elemente - `sbb-logo`: It displays the SBB logo. - `sbb-logo-anniversary`: SBB 125 years anniversary logo - `sbb-logo-cargo`: It displays the SBB Cargo logo. - `sbb-logo-cargo-international`: It displays the SBB Cargo International logo. - `sbb-logo-elvetino`: It displays the SBB Elvetino logo. ## Übersicht ### 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](https://digital.sbb.ch/de/design-system/lyne/components/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. ## Implementation (Web Components, Englisch) 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. ```css /** Selector combination for demo purposes only. */ sbb-logo, sbb-logo-cargo-international, sbb-logo-cargo, sbb-logo-elvetino { height: 20px; } ``` ```html

``` ### Style All the components have a negative variant which can be set using the `negative` property. ```html

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

``` ### 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 ``, so it can be used inside the `` in the same way as ``. The anniversary logo does not support a protective room option. If a protective room is required, a wrapping `

` 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 `` to display the end state immediately. ```html ``` ## API (Web Components, Englisch) Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/logo/api.md