# Logo Component of the SBB design system Lyne. - Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`) - Structure: several elements that can be used on their own - Categories: Display - Status: Design guidelines complete ## Links - Page on digital.sbb.ch: https://digital.sbb.ch/en/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 ## Elements - `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. ## Overview ### 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](https://digital.sbb.ch/en/design-system/lyne/components/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. ## Implementation (web components) 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) Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/logo/api.md