# Footer

Komponente des SBB Design Systems Lyne.

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

## Links

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

## Elemente

- `sbb-footer`: It displays a footer section for the page.

## Übersicht

### Was macht die Komponente?
Der Footer ist der untere Abschnitt einer Seite. Er enthält Links zu weiterführenden Inhalten, rechtliche Hinweise und Kontaktinformationen. Die Inhalte bestehen üblicherweise aus [Link-Lists](https://digital.sbb.ch/de/design-system/lyne/components/link-list/). In der Variante «clock-columns» werden sie in Spalten angeordnet.

### Wann soll die Komponente eingesetzt werden?
* Auf jeder Seite einer Website, um konsistente Informationen und Navigation bereitzustellen.
* Um Kontaktinformationen, rechtliche Hinweise und weiterführende Links anzubieten.

### Regeln.
* Der Footer enthält nur relevante Informationen, zum Beispiel Impressum, Datenschutz und Kontakt.
* Der Footer soll nicht überladen sein. Die wichtigsten Informationen sind leicht zu finden.
* Die SBB Uhr ist fixer Bestandteil des Footers und darf nur für interne Anwendungen entfernt werden.
* Der Footer braucht einen Titel für Screenreader (`accessibility-title`). Er ist visuell nicht sichtbar.

## Implementation (Web Components, Englisch)

The `<sbb-footer>` component is used to display page related information like copyright, contact or other
content related links; for these, the [sbb-link-list](https://lyne-elements.app.sbb.ch/?path=/docs/elements-link-list--docs) component can be used.

### Variants

There are two variants of the footer: the `variant='default'`, which displays the slotted content in regular
block element approach and the `variant='clock-columns'`, which uses a CSS-grid for displaying the content over different
breakpoints.

**Note:**
Content, like `<sbb-link-list>` that could come along with a button, needs to be wrapped with a `<div>` element with a helper
class (`class="sbb-link-list-button-group"`) to be displayed correctly.

```html
<!-- 'default' variant -->
<sbb-footer accessibility-title="Footer">
  <sbb-link-list title-level="2" title-content="List title text">
    <sbb-block-link href="#">Link 1</sbb-block-link>
    <sbb-block-link href="#">Link 2</sbb-block-link>
    <sbb-block-link href="#">Link 3</sbb-block-link>
    <sbb-block-link href="#">Link 4</sbb-block-link>
    <sbb-block-link href="#">Link 5</sbb-block-link>
  </sbb-link-list>
</sbb-footer>

<!--'clock-columns' variant -->
<sbb-footer accessibility-title="Footer" variant="clock-columns">
  <div class="sbb-link-list-button-group">
    <sbb-link-list title-level="2" title-content="Help &amp; Contact.">
      <sbb-block-link href="#">Refunds</sbb-block-link>
      <sbb-block-link href="#">Lost property office</sbb-block-link>
      <sbb-block-link href="#">Complaints</sbb-block-link>
      <sbb-block-link href="#">Praise</sbb-block-link>
      <sbb-block-link href="#">Report property damage</sbb-block-link>
    </sbb-link-list>
    <sbb-button-link size="l">All help topics</sbb-button-link>
  </div>
  <sbb-link-list title-level="2" title-content="More SBB.">
    <sbb-block-link href="#">Jobs & careers</sbb-block-link>
    <sbb-block-link href="#">Rail traffic information</sbb-block-link>
    <sbb-block-link href="#">SBB News</sbb-block-link>
    <sbb-block-link href="#">SBB Community</sbb-block-link>
    <sbb-block-link href="#">Company</sbb-block-link>
  </sbb-link-list>
  ...
  <sbb-divider></sbb-divider>
  <sbb-link-list size="xs" horizontal-from="large">
    <sbb-block-link href="#">Refunds</sbb-block-link>
    <sbb-block-link href="#">Lost property office</sbb-block-link>
    <sbb-block-link href="#">Complaints</sbb-block-link>
    <sbb-block-link href="#">Praise</sbb-block-link>
    <sbb-block-link href="#">Report property damage</sbb-block-link>
  </sbb-link-list>
</sbb-footer>
```

### Style

It's possible to display the footer in `negative` variant; please also apply the negative attribute
to the content where needed (e.g. `<sbb-link-list>`, `<sbb-link>` and `<sbb-divider>`).

```html
<sbb-footer negative accessibility-title="Footer">
  <sbb-link-list negative title-level="2" title-content="Help &amp; Contact.">
    <sbb-block-link negative href="#">Refunds</sbb-block-link>
    <sbb-block-link negative href="#">Lost property office</sbb-block-link>
    <sbb-block-link negative href="#">Complaints</sbb-block-link>
    <sbb-block-link negative href="#">Praise</sbb-block-link>
    <sbb-block-link negative href="#">Report property damage</sbb-block-link>
  </sbb-link-list>
</sbb-footer>
```

## API (Web Components, Englisch)

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