Was macht die Komponente?
Die Komponente stellt das Logo der SBB dar und sorgt für eine konsistente Darstellung der Webseite oder Applikation.
Wann soll die Komponente eingesetzt werden?
- Um die Markenidentität auf jeder Seite der Anwendung oder Webseite zu stärken.
Regeln
- Die Darstellung und Platzierung wird durch den Header gewährleistet.
- Das Logo darf weder verändert noch ausgeblendet werden.
- Das Logo soll nur einmal pro Seite dargestellt werden.
Spielwiese
Beispiele
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. |