Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne 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 Functional 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 Komponenten Overview Base Informationen Overview Base Components Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Footer Info

What does the component do?

The footer is the bottom section of a website that contains important information and elements that help users find additional content or legal information.

When should the component be used?

  • On every page of a website to provide consistent information and navigation.
  • To display contact information, legal notices, links.
  • To increase usability by making important links and information easily accessible.


  • The content of the footer should contain relevant and important information, such as imprint, privacy policy, contact information and links.
  • Make sure that the footer is not crowded and that the most important information is easy to find
  • The SBB clock is an integral part of the footer and may only be removed for internal use.
Anatomy of the component
Number Type Description Optional Info
1 Slot Die Inhalte werden Block für Block dargestellt (per css-grid) Yes Nur bei Variante variant='clock-columns'
2 Component sbb-divider Yes
3 Slot Beliebiger Inhalt Yes Üblicherweise wird eine sbb-link-list verwendet.


Footer Clock Columns
Footer Clock Columns Negative
Footer Clock Columns Expanded
Footer Default
Footer Default Negative
Footer Default Expanded
HTML-Markup kopiert.

The sbb-footer component is used to display page related information like copyright, contact or other
content related links; for these, the sbb-link-list component can be used.


There are two variants of the footer: the variant='default', which displays the slotted content in regular
block element approach and the variant='clock-columns', which uses a css-grid for displaying the content over different

Content, like sbb-link-list that could come along with a button, needs to be wrapped with a <div> element with a helper
class (class="sbb-link-list-button-group") to be displayed correctly.

<!-- 'default' variant -->
<sbb-footer accessibility-title="Footer">
  <sbb-link-list title-level="2" title-content="List title text">
    <sbb-block-link href="#">Link 1</sbb-block-link>
    <sbb-block-link href="#">Link 2</sbb-block-link>
    <sbb-block-link href="#">Link 3</sbb-block-link>
    <sbb-block-link href="#">Link 4</sbb-block-link>
    <sbb-block-link href="#">Link 5</sbb-block-link>

<!--'clock-columns' variant -->
<sbb-footer accessibility-title="Footer" variant="clock-columns">
  <div class="sbb-link-list-button-group">
    <sbb-link-list title-level="2" title-content="Help &amp; Contact.">
      <sbb-block-link href="#">Refunds</sbb-block-link>
      <sbb-block-link href="#">Lost property office</sbb-block-link>
      <sbb-block-link href="#">Complaints</sbb-block-link>
      <sbb-block-link href="#">Praise</sbb-block-link>
      <sbb-block-link href="#">Report property damage</sbb-block-link>
    <sbb-button-link>All help topics</sbb-button-link>
  <sbb-link-list title-level="2" title-content="More SBB.">
    <sbb-block-link href="#">Jobs & careers</sbb-block-link>
    <sbb-block-link href="#">Rail traffic information</sbb-block-link>
    <sbb-block-link href="#">SBB News</sbb-block-link>
    <sbb-block-link href="#">SBB Community</sbb-block-link>
    <sbb-block-link href="#">Company</sbb-block-link>
  <sbb-link-list size="xs" horizontal-from="large">
    <sbb-block-link href="#">Refunds</sbb-block-link>
    <sbb-block-link href="#">Lost property office</sbb-block-link>
    <sbb-block-link href="#">Complaints</sbb-block-link>
    <sbb-block-link href="#">Praise</sbb-block-link>
    <sbb-block-link href="#">Report property damage</sbb-block-link>


It's possible to display the footer in negative variant; please also apply the negative attribute
to the content where needed (e.g. sbb-link-list, sbb-link and sbb-divider).

<sbb-footer negative accessibility-title="Footer">
  <sbb-link-list negative title-level="2" title-content="Help &amp; Contact.">
    <sbb-block-link negative href="#">Refunds</sbb-block-link>
    <sbb-block-link negative href="#">Lost property office</sbb-block-link>
    <sbb-block-link negative href="#">Complaints</sbb-block-link>
    <sbb-block-link negative href="#">Praise</sbb-block-link>
    <sbb-block-link negative href="#">Report property damage</sbb-block-link>


Name Attribute Privacy Type Default Description
accessibilityTitle accessibility-title public string | undefined Footer title text, visually hidden, necessary for screen readers.
accessibilityTitleLevel accessibility-title-level public SbbTitleLevel '1' Level of the accessibility title, will be rendered as heading tag (e.g. h1). Defaults to level 1.
expanded expanded public boolean false Whether to allow the footer content to stretch to full width. By default, the content has the appropriate page size.
negative negative public boolean false Negative coloring variant flag.
variant variant public 'default' | 'clock-columns' 'default' Variants to display the footer. The default, displays the content in regular block element approach. The clock-columns, used a css-grid for displaying the content over different breakpoints.


Name Description
Use the unnamed slot to add elements like sbb-block-link, sbb-link-list, sbb-divider and so on.
Imprint Contact Cookie settings