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 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'> <p class='img'>
<img src='/images/dashboards/clock_card_large.png' alt='Screenshot of the clock card'> <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 ## Card settings
{% configuration_basic %} {% configuration_basic %}
Title:
description: Adds a title to the top of the card
Clock Size: Clock Size:
description: Adjusts the size of the text allowing a wider range of use with different types of dashboards. Defaults to small. description: Adjusts the size of the text allowing a wider range of use with different types of dashboards. Defaults to small.
Display Seconds: Display Seconds:
description: Shows seconds alongside the clock, providing the time format is in a 12-hour format. description: Shows seconds alongside the clock, providing the time format is in a 12-hour format.
Time Format: Time Format:
description: Allows the time format to be changed on a per-card level. Defaults to the user profile setting. 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 %} {% endconfiguration_basic %}
### Examples ### Examples
@ -39,25 +43,21 @@ Basic example:
type: clock type: clock
``` ```
Clock card with no configuration
<p class='img'> <p class='img'>
<img src='/images/dashboards/clock_card_default.png' alt='Screenshot of the basic clock card'> <img src='/images/dashboards/clock_card_default.png' alt='Screenshot of the basic clock card'>
Screenshot of the basic clock card Screenshot of the basic clock card
</p> </p>
Example of a larger clock card for tablet dashboards:
```yaml ```yaml
type: clock type: clock
clock_size: large clock_size: large
time_format: "12" time_format: "12"
show_seconds: true show_seconds: true
grid_options:
columns: 12
rows: 2
``` ```
Example of a larger clock card for tablet dashboards:
<p class='img'> <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'> <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 Screenshot of a large sized, 12 hour clock card showing am/pm and seconds
@ -75,4 +75,35 @@ show_seconds: false
<p class='img'> <p class='img'>
<img src='/images/dashboards/clock_card_medium.png' alt='Screenshot of a medium sized, 12 hour clock showing am/pm'> <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 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> </p>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB