Preview.

What does the component do?

The component displays the SBB signet and ensures its aspect ratio and protective room. It is part of the logo.

When should the component be used?

• When only the signet without the wordmark is required, e.g. in the header at a small size.
• For the complete logo, use the logo component.

Rules.

• The signet must not be changed.
• The size (height or width) is set on the element. The protective room is determined by the variant (ideal, minimal, panel, none).
• Provide a label for screen readers if the signet appears as a standalone element.

Specification.

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Documentation.

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>

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

class: SbbSignetElement, sbb-signet.

Properties.

CSS Properties.