Link-List. Übersicht

Vorschau.

Link 1 Link 2 Link 3

Was macht die Komponente?

Eine Link-List ist eine strukturierte Sammlung von Links zu verwandten Inhalten oder wichtigen Bereichen einer Website. Sie hat einen optionalen Titel.

Wann soll die Komponente eingesetzt werden?

  • Um verwandte oder thematisch geordnete Links zu zeigen.
  • Um wichtige Navigationspunkte oder Ressourcen strukturiert anzubieten, zum Beispiel im Footer.

Ähnliche Komponente.

Link-List-Anchor Anwendung

Regeln.

  • Die Link-Texte sind beschreibend und aussagekräftig.
  • Die Links sind thematisch geordnet.
  • Die Liste enthält nur wenige Links, damit sie übersichtlich bleibt.
  • Die Liste ist standardmässig vertikal. Ab einem wählbaren Breakpoint kann sie horizontal dargestellt werden. Horizontal wird der Titel nicht angezeigt.
  • Für Sprünge innerhalb der aktuellen Seite wird die Link-List-Anchor verwendet.

Spezifikation.

In Figma öffnen
Beispiele Link List Default.
Auf Storybook ausprobieren HTML einblenden
Link List XS.
Auf Storybook ausprobieren HTML einblenden
Link List S.
Auf Storybook ausprobieren HTML einblenden
Link List M.
Auf Storybook ausprobieren HTML einblenden
Link List No Title.
Auf Storybook ausprobieren HTML einblenden
Link List Negative.
Auf Storybook ausprobieren HTML einblenden
Link List Horizontal From.
Auf Storybook ausprobieren HTML einblenden
Link List With Slotted Title.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Storybook mit Live-Beispielen Quellcode auf GitHub

Dokumentation.

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.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

Angular-Übersicht Angular-API Angular-Beispiele 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.