2025.9.3
Home ▸ Dashboards ▸

Clock card

The Clock card shows the current time in a variety of formats, sizes and time zones.

Screenshot of the clock card Screenshot of the clock card

To add the clock card to your user interface:

  1. In the top right of the screen, select the edit button.
    • If this is your first time editing a dashboard, the Edit dashboard dialog appears.
      • By editing the dashboard, you are taking over control of this dashboard.
      • This means that it is no longer automatically updated when new dashboard elements become available.
      • Once you’ve taken control, you can’t get this specific dashboard back to update automatically. However, you can create a new default dashboard.
      • To continue, in the dialog, select the three dots menu, then select Take control.
  2. Add a card and customize actions and features to your dashboard.

All options for this card can be configured via the user interface.

Card settings

Configuration Variables

Looking for your configuration file?
title string (Optional)

Adds a title to the top of the card

clock_style list (Optional, default: digital)

Allows the clock to be displayed in a digital or analog style. Defaults to digital.

digital

Digital clock style.

analog

Analog clock style.

clock_size list (Optional, default: small)

Adjusts the size of the text allowing a wider range of use with different types of dashboards. Defaults to small.

small

Small clock size.

medium

Medium clock size.

large

Large clock size.

show_seconds boolean (Optional, default: false)

Shows seconds alongside the clock, providing the time format is in a 12-hour format.

no_background boolean (Optional, default: false)

Removes the background of the clock card.

time_format string (Optional)

Allows the time format to be changed on a per-card level. Defaults to the user profile setting.

time_zone string (Optional)

Change the timezone used for the time on a per-card level. Defaults to the user profile setting.

analog_options map (Optional)

When using the analog clock style, this allows the user to configure the appearance of the clock.

border boolean (Optional, default: false)

Shows a border around the clock face. Defaults to false.

ticks list (Optional, default: hour)

Shows ticks (indices) on the clock face. Defaults to hour.

none

No ticks are shown.

quarter

Quarter hour ticks are shown.

hour

Hour ticks are shown.

minute

Minute ticks are shown.

Examples

Basic example:

type: clock

Screenshot of the basic clock card Screenshot of the basic clock card

Example of a larger clock card for tablet dashboards:

type: clock
clock_size: large
time_format: "12"
show_seconds: true

Screenshot of a large sized, 12 hour clock card showing am/pm and seconds Screenshot of a large sized, 12 hour clock card showing am/pm and seconds

A medium-sized clock card better suited for desktop dashboards:

type: clock
clock_size: medium
time_format: "12"
show_seconds: false

Screenshot of a medium sized, 12 hour clock showing am/pm Screenshot of a medium sized, 12 hour clock showing am/pm

A medium-sized, 24 hour clock using the London timezone with a title

type: clock
clock_size: medium
time_zone: Europe/London
title: London 💂

Screenshot of a medium sized, 24 hour clock showing seconds based in London along with a title Screenshot of a medium sized, 24 hour clock showing seconds based in London along with a title

A medium-sized, 12 hour clock using the New York timezone with a title

type: clock
clock_size: medium
time_format: "12"
time_zone: America/New_York
title: New York 🦅

Screenshot of a medium sized, 12 hour clock showing am/pm and seconds based in New York along with a title Screenshot of a medium sized, 12 hour clock showing am/pm and seconds based in New York along with a title

Analog clock with no border and hour ticks:

type: clock
clock_style: analog
clock_size: medium
analog_options:
  border: false
  ticks: hour

Screenshot of a medium sized, analog clock and hour ticks Screenshot of a medium sized, analog clock and hour ticks

Analog clock with border and minute ticks showing seconds:

type: clock
clock_style: analog
clock_size: medium
show_seconds: true
analog_options:
  border: true
  ticks: minute

Screenshot of a medium sized, analog clock and minute ticks showing seconds Screenshot of a medium sized, analog clock and minute ticks showing seconds

Analog clock with a title, no ticks and border with seconds:

type: clock
clock_style: analog
clock_size: medium
show_seconds: true
analog_options:
  border: true
  ticks: none
title: Mountain Time

Screenshot of a medium sized, analog clock with a title, no ticks and border showing seconds Screenshot of a medium sized, analog clock with a title, no ticks and border showing seconds

Related topics