Signet. Info

What does the component do?

The component represents the SBB signet and is part of the logo.

When should the component be used?

  • When the logo is used/required.

Rules.

  • The presentation, size and placement are guaranteed by the logo.
  • The logo must not be changed.
Logo
Anatomy

Anatomy of the component


 Demo

Playground.

Protective room Ideal Minimal No protective room 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
Panel Protective Room.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

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

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

Style.

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

With panel value, the component is displayed with a left padding, similar to the <sbb-logo> component but without the text.
This is useful, for example, in the <sbb-header> with size='s'.

<sbb-signet protective-room="none"></sbb-signet>

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

<sbb-signet protective-room="panel"></sbb-signet>

API Documentation.

class: SbbSignetElement, sbb-signet.

Properties.

Name Attribute Privacy Type Default Description
accessibilityLabel accessibility-label public string 'Logo' Accessibility label which will be forwarded to the inner SVG signet.
protectiveRoom protective-room public 'none' | 'minimal' | 'ideal' | 'panel' 'ideal' Visual protective room around signet.

CSS Properties.

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