Link-List-Anchor. Overview

Preview.

Link 1 Link 2 Link 3

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.

Similar component.

Link-List Usage

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.

Specification.

Open in Figma
Examples Default.
Try it out on Storybook Show HTML
Size XS.
Try it out on Storybook Show HTML
Size S.
Try it out on Storybook Show HTML
Size M.
Try it out on Storybook Show HTML
Slotted Title.
Try it out on Storybook Show HTML
Negative.
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-anchor> is a component that can be used to collect and display sbb-block-link.
It is mainly intended to be used as a link list for page anchors.

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

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

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
negative negative public boolean false Negative coloring variant flag.
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.