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 Components Overview Base Informationen Overview Base Components Sense & Purpose Community Assets Instructions App Icons Power-Apps Digital banner ads SAP Design Guidelines Clock Info

The digital SBB clock is used in web applications or on dynamic customer information channels on the train or at the station. It imitates the motion of the physical SBB clock and adapts its design. The SBB station clock is protected by trade mark and copyright law.

Use

It may only be used by all Swiss infrastructure managers (IMs) and licensed transport companies (LTCs). It must be used exactly as it is specified.
The clock should be placed on a solid-colour background; it should not be placed on pictures or graphics. On light backgrounds, the clock face is visually separated from the background using a grey frame; the version without the frame should be used on dark backgrounds.

What does the component do?

The SBB clock gives the system time of the display unit in analogue form. The system time should be taken from a reliable time server, if this can be influenced.

When should the component be used?

  • The component is used wherever the exact time needs to be communicated. In most cases, this relates to display units with real-time information on public transport.
  • The clock can also be used as a stylistic element, but the customer benefit must be guaranteed in all cases.

Rules

  • The minimum size of the clock must not be less than 75px x 75px.
  • Depending on the location it is used in, the minimum size must be adjusted to the viewing distance. As a rule of thumb, viewing distance / 60 = clock size (e.g. 3000mm / 60 = 50mm clock size).
  • Only one clock should be used per page / view.
  • The distance between the clock and the nearest elements (margin) must be at least 20% of the clock’s diameter on each side.
Footer
Anatomy
Anatomy of the component
 Demo

Playground

Background White Milk Iron Charcoal Black
Default
Try it out on Storybook Show HTML
Paused
Try it out on Storybook Show HTML
Copy HTML to clipboard. 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.
Contact

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Data privacy Cookie settings