# Link-List-Anchor

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-anchor/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-link-list-anchor--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/link-list-anchor/overview (API: https://lyne-angular.app.sbb.ch/angular/components/link-list-anchor/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=31083-318119
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/link-list-anchor

## Elemente

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

## Verwandte Komponenten

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

## Übersicht

### Was macht die Komponente?
Die Link-List-Anchor ist eine Liste von Links, die zu Abschnitten der aktuellen Seite springen.

### Wann soll die Komponente eingesetzt werden?
* Um bei längeren Seiten eine Übersicht der Abschnitte zu zeigen und direkt dorthin zu springen.

### Regeln.
* Die Link-Texte sind beschreibend und entsprechen den Titeln der Abschnitte.
* Die Reihenfolge der Links entspricht der Reihenfolge der Abschnitte auf der Seite.
* Die Liste enthält nur Block-Links. Ihre Grösse und Farbvariante setzt die Liste.
* Für Links zu anderen Seiten wird die [Link-List](https://digital.sbb.ch/de/design-system/lyne/components/link-list/) verwendet.

## Implementation (Web Components, Englisch)

The `<sbb-link-list-anchor>` 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).
It is mainly intended to be used as a link list for page anchors.

```html
<sbb-link-list-anchor>
  <sbb-block-link href="#refunds">Refunds</sbb-block-link>
  <sbb-block-link href="#loss-report">Loss Report</sbb-block-link>
  ...
</sbb-link-list-anchor>
```

### 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-anchor title-content="Help & Contact"> ... </sbb-link-list-anchor>
```

### 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-anchor size="xs" negative>
  <sbb-block-link href="#refunds">Refunds</sbb-block-link>
  <sbb-block-link href="#loss-report">Loss Report</sbb-block-link>
  ...
</sbb-link-list-anchor>
```

## API (Web Components, Englisch)

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