Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Additional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Components Overview Base Informations Overview Base Components Overview App Icons Power-Apps Digital banner ads SAP Design Guidelines AI Design: Basics Link-List-Anchor Info

What does the component do?

The component provides a collection of links that lead to content on the current page.

When should the component be used?

  • To display an overview of the content of the current page.
  • To offer users quick access to content.

Rules

  • Use descriptive and meaningful link texts to make the target content understandable.
  • Make sure that the links in the list are in chronological order.
Link-List Block-Link
Anatomy

Anatomy of the component


Number Type Description Optional Info
1 Component sbb-title Yes
1 Component sbb-block-link No
Demo

Playground

Link 1 Link 2 Link 3
Title Yes No Sizes XS S M Negative No Yes Mode (System Setting) Light Dark Background White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
Default
Try it out on Storybook Show HTML
Size XS
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

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>

Properties

Name Attribute Privacy Type Default Description
negative negative public boolean false Negative coloring variant flag.
size size public SbbLinkSize 's' / 'xs' (lean) Text size of the nested sbb-block-link instances. 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 SbbTitleLevel '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.
Contact

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Data privacy Cookie settings