# Link-List-Anchor

Component of the SBB design system Lyne.

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

## Links

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

## Elements

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

## Related components

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

## Overview

### What does the component do?
The link list anchor is a list of links that jump to sections of the current page.

### When should the component be used?
* To show an overview of the sections on longer pages and jump directly to them.

### Rules.
* The link texts are descriptive and match the titles of the sections.
* The order of the links matches the order of the sections on the page.
* The list contains only block links. The list sets their size and colour variant.
* For links to other pages, use the [link list](https://digital.sbb.ch/en/design-system/lyne/components/link-list/).

## Implementation (web components)

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)

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