5.7 KiB
type, title, sidebar_label, description, related
| type | title | sidebar_label | description | related | |||||
|---|---|---|---|---|---|---|---|---|---|
| card | Clock card | Clock | The Clock card shows the current time in a variety of formats and sizes. |
|
The Clock card shows the current time in a variety of formats, sizes and time zones.
Screenshot of the clock card
{% include dashboard/edit_dashboard.md %}
All options for this card can be configured via the user interface.
Card settings
{% configuration %} title: description: Adds a title to the top of the card type: string required: false clock_style: description: Allows the clock to be displayed in a digital or analog style. Defaults to digital. type: list required: false default: digital keys: digital: description: Digital clock style. analog: description: Analog clock style. clock_size: description: Adjusts the size of the text allowing a wider range of use with different types of dashboards. Defaults to small. type: list required: false default: small keys: small: description: Small clock size. medium: description: Medium clock size. large: description: Large clock size. show_seconds: description: Shows seconds alongside the clock, providing the time format is in a 12-hour format. type: boolean required: false default: false no_background: description: Removes the background of the clock card. type: boolean required: false default: false time_format: description: Allows the time format to be changed on a per-card level. Defaults to the user profile setting. type: string required: false time_zone: description: Change the timezone used for the time on a per-card level. Defaults to the user profile setting. type: string required: false analog_options: description: When using the analog clock style, this allows the user to configure the appearance of the clock. type: map required: false keys: border: description: Shows a border around the clock face. Defaults to false. type: boolean required: false default: false ticks: description: Shows ticks (indices) on the clock face. Defaults to hour. type: list required: false default: hour keys: none: description: No ticks are shown. quarter: description: Quarter hour ticks are shown. hour: description: Hour ticks are shown. minute: description: Minute ticks are shown. {% endconfiguration %}
Examples
Basic example:
type: clock
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
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
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
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
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
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
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