Download – digital.sbb.ch

Download.

Overview

Preview.

What does the component do?

A download displays a document for downloading, e.g. a PDF. The whole area is a link. Title, file type, size and modification date help users judge what they will get.

When should the component be used?

To offer documents such as reports, forms or fact sheets for download.
To list several documents in a consistent way.

Usage

Rules.

The title describes the content of the document, not the file name.
File type and size should always be shown, the modification date if it is relevant to users.
Documents that are not accessible must be marked as such.
For links to web pages, use a link or a card, not a download.

Elements.

This component consists of a main element and its parts. Use the parts only within the element they belong to.

sbb-download

Parts – only within sbb-download:
- sbb-download-info

Examples

Default.

Download.

Custom Label.

Long Document Title.

Custom Type.

Without Size.

Without Changed.

Non Accessible.

Custom Icon.

Custom Icon Slot.

Custom Content Only.

Custom Content And Info.

Without Slotted Content.

Milk.

Copy HTML to clipboard.

Implementation

The <sbb-download> is a component that displays a downloadable document, styled as a
sbb-card. The whole area is rendered as a link.

<sbb-download href="annual-report.pdf">
  <sbb-download-info size="1234567" changed="2026-12-24"></sbb-download-info>
</sbb-download>

The label shown as the title defaults to the file name extracted from the href,
but can be set explicitly.

<sbb-download href="files/2026/annual-report.pdf" label="Annual report"></sbb-download>

Download vs. inline.

Whether the referenced document is downloaded or shown inline in the browser is up to the consumer:

With the download attribute, activating the component triggers the browser download.
Without it, the document is opened inline. In this case the link opens in a new browser tab
(target="_blank") by default and an "opens in new window" hint is provided to assistive
technology. An explicitly set target takes precedence; an empty target attribute
opts out of the new tab behavior without specifying a target.

<!-- Triggers the browser download -->
<sbb-download href="annual-report.pdf" download></sbb-download>

<!-- Opens the document inline in a new tab -->
<sbb-download href="annual-report.pdf"></sbb-download>

<!-- Opens the document inline in the same tab -->
<sbb-download href="annual-report.pdf" target="_self"></sbb-download>

<!-- Opens the document inline without a target -->
<sbb-download href="annual-report.pdf" target=""></sbb-download>

It's possible to set the other link related properties rel and target as well.

Icon.

An icon is automatically derived from the href file extension. The following extensions
are mapped to a dedicated document icon; any other (or missing) extension falls back to the
generic document-standard-small icon.

File extension	Icon
`.pdf`	`document-pdf-small`
`.xls`, `.xlsx`	`document-xls-small`
`.ppt`, `.pptx`	`document-ppt-small`
`.doc`, `.docx`	`document-doc-small`
`.zip`	`document-zip-small`
`.jpg`, `.jpeg`, `.png`, `.gif`, `.svg`, `.webp`	`document-image-small`
anything else / no extension	`document-standard-small`

A custom icon can be set with the iconName property or via the icon slot, which overrides
the automatic derivation.

<sbb-download href="document.pdf" icon-name="circle-information-small"></sbb-download>

Content.

The content of the unnamed slot and the <sbb-download-info> block are both optional and
independent. You can render custom content, a <sbb-download-info>, both, or none of them.

A <sbb-download-info> placed in the unnamed slot is automatically moved to the dedicated
info slot, so it always renders in the correct position. The <sbb-download-info> assigns
itself to the info slot in its connectedCallback, which only runs on the client; during
server-side rendering the element stays in the unnamed slot until it is hydrated.

<sbb-download href="report.pdf" label="Annual report">
  <span>Custom description for the downloadable document.</span>
  <sbb-download-info type="PDF" size="123 KB" changed="2026-12-24"></sbb-download-info>
</sbb-download>

Document metadata.

Use the optional <sbb-download-info> component to display the document's metadata.
The information is rendered in the order type, size, non-accessible, changed,
skipping any value that has not been provided.

type falls back to the file extension of the parent sbb-download.
size, if it contains only digits, is interpreted as a number of bytes and shortened to the
closest unit (e.g. 1234567 becomes 1 MB); otherwise it is displayed as is.
changed accepts an ISO 8601 date string and is rendered as a formatted date.
nonAccessible renders a localized "not accessible" hint.

<sbb-download href="report.pdf">
  <sbb-download-info
    type="PDF"
    size="123 KB"
    changed="2026-12-24"
    non-accessible
  ></sbb-download-info>
</sbb-download>

Angular.

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

Angular overview

Angular API

Angular examples

API

class: `SbbDownloadElement`, `sbb-download`.

Properties.

Name	Attribute	Privacy	Type	Default	Description
`accessibilityCurrent`	`accessibility-current`	public	`string`	`''`	This will be forwarded as aria-current to the inner anchor element.
`accessibilityLabel`	`accessibility-label`	public	`string`	`''`	This will be forwarded as aria-label to the inner anchor element.
`color`	`color`	public	`'white' \| 'milk'`	`'white'`	Option to set the component's background color.
`download`	`download`	public	`boolean`	`false`	Whether the browser will show the download dialog on click.
`fileExtension`	-	public	`string`		The lower-cased file extension extracted from the `href` (e.g. `pdf`), if any.
`fileName`	-	public	`string`		The file name extracted from the `href` (e.g. `report.pdf`).
`href`	`href`	public	`string`	`''`	The href value you want to link to.
`iconName`	`icon-name`	public	`string`	`''`	The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.
`label`	`label`	public	`string`	`''`	The label of the download. Defaults to the file name of the `href`.
`rel`	`rel`	public	`string`	`''`	The relationship of the linked URL as space-separated link types.
`target`	`target`	public	`'_blank' \| '_self' \| '_parent' \| '_top' \| string`	`''`	Where to display the linked URL.

Slots.

Name	Description
	Use the unnamed slot to add custom content. Optional.
`icon`	Use this slot to display a custom icon, by providing a `sbb-icon` component. Optional.
`info`	Slot used to render a `sbb-download-info`. A `sbb-download-info` placed in the unnamed slot is automatically moved to this slot. Optional.

class: `SbbDownloadInfoElement`, `sbb-download-info`.

Properties.

Name	Attribute	Privacy	Type	Default	Description
`changed`	`changed`	public	`string`	`''`	The date of the latest change of the document, as an ISO 8601 string.
`nonAccessible`	`non-accessible`	public	`boolean`	`false`	Whether the document is not accessible.
`size`	`size`	public	`string`	`''`	The size of the document. If the value contains non-numeric characters it is rendered as is, otherwise it is interpreted as a number of bytes and shortened to the closest unit.
`type`	`type`	public	`string`	`''`	The type of the document (e.g. `PDF`). Falls back to the extension of the parent `sbb-download`.

Navigieren auf digital.sbb.ch

Preview.

What does the component do?

When should the component be used?

Rules.

Elements.

Download vs. inline.

Icon.

Content.

Document metadata.

Angular.

class: SbbDownloadElement, sbb-download.

Properties.

Slots.

class: SbbDownloadInfoElement, sbb-download-info.

Properties.

class: `SbbDownloadElement`, `sbb-download`.

class: `SbbDownloadInfoElement`, `sbb-download-info`.