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.
Playground
Examples
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>
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 | undefined | '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. |