Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Overview Releases Design Tokens Komponenten Aperçu Base Informations Aperçu Base Composants Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Clock Info

Was macht die Komponente?

Die Schweizer Bahnhofsuhr wurde 1944 vom Schweizer Ingenieur und Gestalter Hans Hilfiker für die SBB entworfen. Sie zeichnet sich durch ein sehr klares, reduziertes Design mit schwarzen Skalenstrichen auf weissem Grund und balkenförmigen, schwarzen Stunden- und Minutenzeigern aus. Ziffern fehlen. Wichtige Merkmale sind der Sekundenstopp und der Minutensprung.

Wann soll die Komponente eingesetzt werden?

  • Um die aktuelle Uhrzeit auf der Website oder in der Anwendung anzuzeigen.
  • Um das Markenbild der SBB zu stärken und Wiedererkennungswert zu schaffen.

Regeln

  • Die SBB Uhr soll originalgetreu und detailgetreu im Design und in der Funktionalität sein.
  • Die Uhr soll stets die korrekte Zeit anzeigen.
  • Die Uhr soll sich harmonisch in das Gesamtdesign der Seite oder Anwendung einfügen, ohne dominant zu wirken.
  • Die Uhr kann in verschiedenen Grössen dargestellt werden, um sich an das Layout anzupassen.
  • Sie darf pro Seite nur einmal vorkommen.
  • Sie ist Bestandteil des Footers.
  • Kunden-Anwendungen sollen die Uhr stehts enthalten.
  • Interne Anwendungen sollen auf die Darstellung der Uhr verzichten.
Anatomie
Anatomie der Komponente
Demo

Beispiele

Default
Paused
HTML-Markup kopiert.
Implementation

The sbb-clock component displays an analog clock face in the style of the classic SBB station clock.

It mimics its behavior too, completing a rotation in approximately 58.5 seconds,
then it briefly pauses at the clock top before starting a new rotation.

<sbb-clock></sbb-clock>

To simulate the current time, you can use the now property
which accepts a time string like HH:MM:SS.
This is helpful if you need a specific state of the component.

<sbb-clock now="23:23:00"></sbb-clock>

Properties

Name Attribute Privacy Type Default Description
now now public SbbTime | null null Define a specific time which the clock should show statically.
Impressum Contact Paramètres des cookies