# Link-List

Komponente des SBB Design Systems Lyne.

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

## Links

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

## Elemente

- `sbb-link-list`: It displays a list of `sbb-block-link`.

## Verwandte Komponenten

- Ähnlich: [Link-List-Anchor](https://digital.sbb.ch/de/design-system/lyne/components/link-list-anchor/index.md)

## Übersicht

### Was macht die Komponente?
Eine Link-List ist eine strukturierte Sammlung von Links zu verwandten Inhalten oder wichtigen Bereichen einer Website. Sie hat einen optionalen Titel.

### Wann soll die Komponente eingesetzt werden?
* Um verwandte oder thematisch geordnete Links zu zeigen.
* Um wichtige Navigationspunkte oder Ressourcen strukturiert anzubieten, zum Beispiel im Footer.

### Regeln.
* Die Link-Texte sind beschreibend und aussagekräftig.
* Die Links sind thematisch geordnet.
* Die Liste enthält nur wenige Links, damit sie übersichtlich bleibt.
* Die Liste ist standardmässig vertikal. Ab einem wählbaren Breakpoint kann sie horizontal dargestellt werden. Horizontal wird der Titel nicht angezeigt.
* Für Sprünge innerhalb der aktuellen Seite wird die [Link-List-Anchor](https://digital.sbb.ch/de/design-system/lyne/components/link-list-anchor/) verwendet.

## Implementation (Web Components, Englisch)

The `<sbb-link-list>` is a component that can be used to collect and display [sbb-block-link](https://lyne-elements.app.sbb.ch/?path=/docs/elements-link--docs).

```html
<sbb-link-list>
  <sbb-block-link
    href="https://www.sbb.ch/en/help-and-contact/refunds-compensation/ticket-refunds.html"
    >Refunds</sbb-block-link
  >
  <sbb-block-link
    href="https://www.sbb.ch/en/help-and-contact/lost-found-office/submit-loss-report.html"
    >Loss Report</sbb-block-link
  >
  ...
</sbb-link-list>
```

### Slots

The component can display an optional title,
which is visually shown as a level-5 [sbb-title](https://lyne-elements.app.sbb.ch/?path=/docs/elements-title--docs)
and is used as the `aria-labelledby` attribute of the `ul` element.

The title can be set using the `titleContent` property or, alternatively, can be projected using the `title` slot.

```html
<sbb-link-list title-content="Help &amp; Contact"> ... </sbb-link-list>
```

### Style

The component will accept only `<sbb-block-link>` or `<sbb-block-link-button>` instances,
and it will sync its `size` and `negative` property with the inner links.

```html
<sbb-link-list size="s" negative>
  <sbb-block-link
    href="https://www.sbb.ch/en/help-and-contact/refunds-compensation/ticket-refunds.html"
    >Refunds</sbb-block-link
  >
  <sbb-block-link
    href="https://www.sbb.ch/en/help-and-contact/lost-found-office/submit-loss-report.html"
    >Loss Report</sbb-block-link
  >
  ...
</sbb-link-list>
```

#### Orientation

The `orientation` property is used to set links' orientation; possible values are `horizontal` and `vertical` (default).
The optional property `horizontalFrom` can be used in combination with `orientation='vertical'`
to indicate the minimum breakpoint from which the orientation changes to `horizontal`.
The title will not be displayed in the horizontal orientation.

```html
<sbb-link-list horizontal-from="large">
  <sbb-block-link
    href="https://www.sbb.ch/en/help-and-contact/refunds-compensation/ticket-refunds.html"
    >Refunds</sbb-block-link
  >
  <sbb-block-link
    href="https://www.sbb.ch/en/help-and-contact/lost-found-office/submit-loss-report.html"
    >Loss Report</sbb-block-link
  >
  ...
</sbb-link-list>
```

## API (Web Components, Englisch)

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