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. |