# Signet

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Brand
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/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

## Elements

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

## Overview

### 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](https://digital.sbb.ch/en/design-system/lyne/components/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.

## Implementation (web components)

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)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/signet/api.md