# Signet

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Brand
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/signet/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-signet--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/signet/overview (API: https://lyne-angular.app.sbb.ch/angular/components/signet/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=31104-455665
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/signet

## Elemente

- `sbb-signet`: It displays the SBB signet.

## Übersicht

### Was macht die Komponente?
Die Komponente zeigt das SBB-Signet an und stellt Seitenverhältnis und Schutzraum sicher. Sie ist Bestandteil des [Logos](https://digital.sbb.ch/de/design-system/lyne/components/logo/).

### Wann soll die Komponente eingesetzt werden?
* Wenn nur das Signet ohne Schriftzug benötigt wird, z.B. im Header mit kleiner Grösse.
* Für das vollständige Logo wird die Logo-Komponente verwendet.

### Regeln.
* Das Signet darf nicht verändert werden.
* Die Grösse (Höhe oder Breite) wird am Element festgelegt. Der Schutzraum wird über die Variante bestimmt (ideal, minimal, panel, none).
* Setze eine Beschriftung für Screenreader, wenn das Signet als eigenständiges Element erscheint.

## Implementation (Web Components, Englisch)

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

```html
<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'`.

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

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

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

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/signet/api.md