Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Lyne Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Roadmap Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Clock Info

Die digitale SBB Uhr wird in Webanwendungen oder auf dynamischen Kundeninformationskanälen im Zug oder am Bahnhof eingesetzt. Sie imitiert die Bewegungen und adaptiert das Design der physischen SBB Uhr. Die SBB Uhr ist eine geschützte Marke.

Verwendung

Die digitale SBB Uhr darf durch alle konzessionierten Transportunternehmen der Schweiz sowie für Projekte im Zusammenhang mit dem öffentlichen Verkehr der Schweiz verwendet werden. Sie muss genauso verwendet werden, wie sie spezifiziert ist.
Die Uhr soll auf einem einfarbigen Hintergrund platziert werden, Platzierungen auf Bilder oder Grafiken sind zu unterlassen. Auf hellen Hintergründen wird das Zifferblatt mit einem grauen Rahmen visuell vom Hintergrund getrennt, auf dunklen Hintergründen ist die Version ohne Rahmen zu verwenden.

Was macht die Komponente?

Die SBB Uhr gibt die Systemzeit des Ausgabegerätes in analoger Form aus. Es ist darauf zu achten, dass die Systemzeit von einem verlässlichen Zeitserver bezogen wird, sofern darauf Einfluss genommen werden kann.

Wann soll die Komponente eingesetzt werden?

  • Die Komponente kommt überall dort zum Einsatz, wo die genaue Zeit kommuniziert werden soll. In den meisten Fällen sind dies Ausgabegeräte mit Echtzeitinformationen zum öffentlichen Verkehr.
  • Die Uhr kann auch als Stilelement verwendet werden, der Kundennutzen muss jedoch in allen Fällen gewährleistet sein.

Regeln

  • Die Mindestgrösse der Uhr darf 75px x 75px nicht unterschreiten.
  • Je nach Einsatzort ist die Mindestgrösse der Betrachtungsdistanz anzupassen. Als Faustregel gilt, Betrachtungsdistanz / 60 = Uhrgrösse (z.B. 3000mm / 60 = 50mm Uhrgrösse).
  • Pro Seite / Ansicht soll nur eine Uhr eingesetzt werden.
  • Der Abstand der Uhr zu den nächstgelegenen Elementen (Margin) muss mindestens je Seite 20% des Uhrdurchmessers betragen.
Footer
Anatomie
Anatomie der Komponente
Demo

Spielwiese

Hintergrund White Milk Iron Charcoal Black
Default
Paused
HTML in Zwischenablage 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.
Komponente finden

Lyne

  • Design Tokens
  • Animation
    Animation
  • Border
    Border
  • Breakpoint
    Breakpoint
  • Color
    Color
  • Layout
    Layout
  • Shadow
    Shadow
  • Size
    Size
  • Spacing
    Spacing
  • Typografie
    Typografie
  • Action
  • More Info
    Action-Group
  • More Info
    Block-Link
  • More Info
    Button
  • More Info
    Link
  • More Info
    Mini-Button-Group
  • More Info
    Secondary-Button
  • More Info
    Teaser
  • More Info
    Teasser-Hero
  • More Info
    Teaser-Product
  • More Info
    Teaser-Product-Static
  • More Info
    Tertiary-Button
  • More Info
    Transparent-Button
  • Brand
  • More Info
    Clock
  • More Info
    Logo
  • Collection
  • More Info
    Link-List
  • More Info
    Link-List-Anchor
  • More Info
    Skiplink-List
  • More Info
    Table-Wrapper
  • Form
  • More Info
    Autocomplete
  • More Info
    Autocomplete-Grid
  • More Info
    Calendar
  • More Info
    Checkbox
  • More Info
    Checkbox-Group
  • More Info
    Checkbox-Panel
  • More Info
    Datepicker
  • More Info
    File-Selector
  • More Info
    Form-Field
  • More Info
    Radio-Button
  • More Info
    Radio-Button-Group
  • More Info
    Radio-Button-Panel
  • More Info
    Select
  • More Info
    Selection-Expansion-Panel
  • More Info
    Slider
  • More Info
    Toggle
  • More Info
    Toggle-Check
  • Indicator
  • More Info
    Alert
  • More Info
    Alert-Group
  • More Info
    Chip
  • More Info
    Loading-Indicator
  • More Info
    Message
  • More Info
    Notification
  • More Info
    Status
  • More Info
    Stepper
  • More Info
    Tag-Group
  • More Info
    Toast
  • Layout
  • More Info
    Accordion
  • More Info
    Card
  • More Info
    Container
  • More Info
    Divider
  • More Info
    Footer
  • More Info
    Header
  • More Info
    Title
  • Navigation
  • More Info
    Breadcrumb
  • More Info
    Breadcrumb-Group
  • More Info
    Menu
  • More Info
    Navigation
  • More Info
    Tab-Group
  • Overlay
  • More Info
    Dialog
  • More Info
    Overlay
  • More Info
    Popover
  • Time-Table
  • More Info
    Journey-Header
  • More Info
    Pearl-Chain
  • Visual asset
  • More Info
    Icon
  • More Info
    Image
Impressum Kontakt Cookie Einstellungen