# Link-List

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/
- 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

## Elements

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

## Related components

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

## Overview

### What does the component do?
A link list is a structured collection of links to related content or important areas of a website. It has an optional title.

### When should the component be used?
* To show related or thematically organised links.
* To offer important navigation points or resources in a structured way, for example in the footer.

### Rules.
* The link texts are descriptive and meaningful.
* The links are organised by topic.
* The list contains only a few links so that it stays clear.
* The list is vertical by default. From a selectable breakpoint, it can be displayed horizontally. When horizontal, the title is not displayed.
* For jumps within the current page, use the [link list anchor](https://digital.sbb.ch/en/design-system/lyne/components/link-list-anchor/).

## Implementation (web components)

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)

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