Logo Info

What does the component do?

The component displays the SBB logo and ensures a consistent presentation of the website or application.

When should the component be used?

  • To strengthen the brand identity on every page of the application or website.

Rules

  • The presentation and placement is guaranteed by the header.
  • The logo can neither be changed nor hidden.
  • The logo should only be displayed once per page.
Signet Header
Anatomy

Anatomy of the component


 Demo

Playground

Protective room Ideal Minimal No protective room Negative No Yes Mode (System Setting) Light Dark Background White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
No Protective Room
Try it out on Storybook Show HTML
Minimal Protective Room
Try it out on Storybook Show HTML
Ideal Protective Room
Try it out on Storybook Show HTML
Negative
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

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

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

Style

The component has a negative variant which can be set using the negative property.

<sbb-logo negative></sbb-logo>

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

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

API Documentation

Properties

Name Attribute Privacy Type Default Description
accessibilityLabel accessibility-label public string 'Logo' Accessibility label which will be forwarded to the SVG logo.
negative negative public boolean false Negative coloring variant flag.
protectiveRoom protective-room public SbbProtectiveRoom 'ideal' Visual protective room around logo.

CSS Properties

Name Default Description
--sbb-logo-height auto Can be used to set the height of the logo.