Download – digital.sbb.ch

Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch

English

Download.

Übersicht

Aperçu.

Was macht die Komponente?

Ein Download zeigt ein Dokument zum Herunterladen an, z.B. ein PDF. Die ganze Fläche ist ein Link. Titel, Dateityp, Grösse und Änderungsdatum helfen Nutzenden einzuschätzen, was sie erhalten.

Wann soll die Komponente eingesetzt werden?

Um Dokumente wie Berichte, Formulare oder Merkblätter zum Herunterladen anzubieten.
Um mehrere Dokumente einheitlich aufzulisten.

Anwendung

Regeln.

Der Titel beschreibt den Inhalt des Dokuments, nicht den Dateinamen.
Dateityp und Grösse sollen immer angegeben werden, das Änderungsdatum, wenn es für Nutzende relevant ist.
Dokumente, die nicht barrierefrei sind, müssen als solche gekennzeichnet werden.
Für Links auf Webseiten soll ein Link oder eine Card verwendet werden, nicht ein Download.

Éléments.

Ce composant se compose d’un élément principal et de ses parties. N’utiliser les parties qu’à l’intérieur de l’élément auquel elles appartiennent.

sbb-download

Parties – uniquement dans sbb-download :
- sbb-download-info

Beispiele

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.

HTML in Zwischenablage kopiert.

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.

Ce composant est également disponible pour Angular dans le paquet @sbb-esta/lyne-angular.

Aperçu Angular

API Angular

Exemples Angular

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

Aperçu.

Was macht die Komponente?

Wann soll die Komponente eingesetzt werden?

Regeln.

Éléments.

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