What does the component do?

The Swiss railway station clock was designed in 1944 by Swiss engineer and designer Hans Hilfiker for the SBB. It is characterised by a very clear, minimalist design with black scale lines on a white background and bar-shaped, black hour and minute hands. There are no numerals. Important features are the second stop and the minute jump.

When should the component be used?

• To display the current time on the website or in the application.
• To strengthen the SBB brand image and create recognition value.

Rules

• The SBB clock should be true to the original and accurate in design and functionality.
• The watch should always display the correct time.
• The clock should fit smoothly into the overall design of the site or application without dominating it.
• The clock can be displayed in different sizes in order to adapt to the layout.
• It may only appear once per page.
• It is part of the footer.
• Customer applications should always include the clock.
• Internal applications should not display the clock.

Examples

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