Link-List. Overview

Preview.

Link 1 Link 2 Link 3

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.

Similar component.

Link-List-Anchor Usage

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.

Specification.

Open in Figma
Examples Link List Default.
Try it out on Storybook Show HTML
Link List XS.
Try it out on Storybook Show HTML
Link List S.
Try it out on Storybook Show HTML
Link List M.
Try it out on Storybook Show HTML
Link List No Title.
Try it out on Storybook Show HTML
Link List Negative.
Try it out on Storybook Show HTML
Link List Horizontal From.
Try it out on Storybook Show HTML
Link List With Slotted Title.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

The <sbb-link-list> is a component that can be used to collect and display sbb-block-link.

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

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

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

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

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples API

Properties.

Name Attribute Privacy Type Default Description
horizontalFrom horizontal-from public 'zero' | 'small' | 'large' | 'ultra' | null null Selected breakpoint from which the list is rendered horizontally.
negative negative public boolean false Negative coloring variant flag.
orientation orientation public 'horizontal' | 'vertical' 'vertical' The orientation in which the list will be shown vertical or horizontal.
size size public 'xs' | 's' | 'm' null Text size of the nested sbb-block-link instances, either xs (lean theme default), s (standard theme default) or m This will overwrite the size attribute of nested sbb-block-link instances.
titleContent title-content public string '' The title text we want to show before the list.
titleLevel title-level public '1' | '2' | '3' | '4' | '5' | '6' '2' The semantic level of the title, e.g. 2 = h2.

Slots.

Name Description
Use the unnamed slot to add one or more sbb-block-link.
title Use this slot to provide a title.