Update clock docs (#38333)

* Improve clock docs

* Fix caption

* Fix typos
This commit is contained in:
Darren Griffin 2025-04-02 18:55:28 +01:00 committed by GitHub
parent fc36dc6785
commit cb438bb9be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 39 additions and 8 deletions

View File

@ -8,7 +8,7 @@ related:
title: Setup your time format and timezone
---
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.
<p class='img'>
<img src='/images/dashboards/clock_card_large.png' alt='Screenshot of the clock card'>
@ -23,12 +23,16 @@ All options for this card can be configured via the user interface.
## Card settings
{% configuration_basic %}
Title:
description: Adds a title to the top of the card
Clock Size:
description: Adjusts the size of the text allowing a wider range of use with different types of dashboards. Defaults to small.
Display Seconds:
description: Shows seconds alongside the clock, providing the time format is in a 12-hour format.
Time Format:
description: Allows the time format to be changed on a per-card level. Defaults to the user profile setting.
Time Zone:
description: Change the timezone used for the time on a per-card level. Defaults to the user profile setting.
{% endconfiguration_basic %}
### Examples
@ -39,25 +43,21 @@ Basic example:
type: clock
```
Clock card with no configuration
<p class='img'>
<img src='/images/dashboards/clock_card_default.png' alt='Screenshot of the basic clock card'>
Screenshot of the basic clock card
</p>
Example of a larger clock card for tablet dashboards:
```yaml
type: clock
clock_size: large
time_format: "12"
show_seconds: true
grid_options:
columns: 12
rows: 2
```
Example of a larger clock card for tablet dashboards:
<p class='img'>
<img src='/images/dashboards/clock_card_large.png' alt='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
@ -75,4 +75,35 @@ show_seconds: false
<p class='img'>
<img src='/images/dashboards/clock_card_medium.png' alt='Screenshot of a medium sized, 12 hour clock showing am/pm'>
Screenshot of a medium sized, 12 hour clock showing am/pm
</p>
A medium-sized, 24 hour clock using the London timezone with a title
```yaml
type: clock
clock_size: medium
time_zone: Europe/London
title: London 💂
```
<p class='img'>
<img src='/images/dashboards/clock_card_london.png' alt='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
</p>
A medium-sized, 12 hour clock using the New York timezone with a title
```yaml
type: clock
clock_size: medium
time_format: "12"
time_zone: America/New_York
title: New York 🦅
```
<p class='img'>
<img src='/images/dashboards/clock_card_new_york.png' alt='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
</p>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB