# Clock

Renders a responsive grid of world-clock cards that re-render every second. Each card shows the zone's current time, a sun or moon day-night icon, the offset from the reader's own zone, and a "(tomorrow)" or "(yesterday)" note when the date there differs. The card matching the reader's own zone is h

![](https://help.gocapable.com/images/a1deb77e-672b-49a9-bd97-29672a4cea22.webp)

Each card carries the current time, the difference from your own zone and a day or night icon, with the card matching your own zone highlighted.

---

## Settings

![](https://help.gocapable.com/images/f41ae17d-02c1-489a-a2f8-5851d85c00a5.webp)

Zones are listed in the order they will appear, and the preview above updates as you add or remove them.

| **Setting**   | **Values**                                                  | **What it changes**                                                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Time Zones    | An ordered list of zones, each with an optional title; drag | "Configure displayed time zones - you can drag and drop to reorder". Each entry has "Title (optional)" (placeholder "Custom name for this timezone") and "Time Zone" (a searchable picker with a "My timezone" shortcut). |
| Background    | A brand colour or a custom hex                              | Card fill colour.                                                                                                                                                                                                         |
| Text          | A brand colour or a custom hex                              | Card text colour.                                                                                                                                                                                                         |
| Accent        | A brand colour or a custom hex                              | Highlight applied only to the card matching the reader's own timezone.                                                                                                                                                    |
| Gap           | 0 to 48 px                                                  | Space between clock cards.                                                                                                                                                                                                |
| Corner radius | 0 to 24 px                                                  | Card corner radius.                                                                                                                                                                                                       |
| Border        | On / off, plus Width 0 to 6 px and a colour                 | Per-card outline. Unlike the Calendar macro, the clock border is on by default, matching the original card look.                                                                                                          |
| Shadow        | None, S, M, L                                               | Resting drop shadow on each card. None leaves only the hover shadow.                                                                                                                                                      |
| Display       | cards (the only value)                                      | Not something you can set in the editor.                                                                                                                                                                                  |

---

## Related

[EventRenders an inline lozenge showing the formatted date range, optionally preceded by the tit](https://help.gocapable.com/calendar/event.html)

[CalendarRenders a FullCalendar grid of the dates on the page, or of a saved Capable calendar, in o](https://help.gocapable.com/calendar/calendar.html)

[MacrosEvery macro in this capability.](https://help.gocapable.com/calendar/macros.html)

---

_One macro, documented properly._