Cargo 3 Docs
Basics
Site Building
Domains
Clock
The clock is a live-updated reference to the current time and date that can be placed anywhere in your site.
To use, place the cursor where you’d like to insert a clock, go to the “Page Options” menu (in the top menu bar) and choose Clock.
Time Zones
By default, the clock will display “Local Time”: the time and date of the computer viewing the site. To have the clock display the time of a specific time zone, uncheck the “Local Time” option and choose a custom UTC offset.
Note: Daylight savings time (DST) is not accounted for.
Styling and Formatting
The clock features a number of classic preset formats like “
Example:
The {ordinal} of {month-name}, {year} →
{roman-year}
{year}
{ordinal}
{day-of-month}
{month-name}
{month}
{day}
{time-of-day}
{period}
{hour}
{minute}
{second}
{centisecond}
Roman numerals
Ordinal date: “fifth” as opposed to “five”
Hours of the day subdivided into three-hour subsections.
Choose additional formatting options through the settings window, like whether to use a 12 or 24-hour clock. Change the “Add Leading Zero” values to pad single-digit values with an extra “0”: 3 -> 03
CSS
The clock can be targeted through digital-clock in your CSS. Each keyword-determined section of the clock can be targeted with digital-clock::part(section), or individually by their keyword, e.g. digital-clock::part(month-name).
For example, the clock uses tabular lining numerals by default, if they are available in the active typeface. To switch to a different style of numerals in your clock, add this into your CSS:
digital-clock::part(section) {
font-variant: lining-nums;
}
While this may look more desirable in certain circumstances, be aware that in non-monospace typefaces it may cause “jumping” in clocks that change or progress quickly:
Tabular Lining:
Customizing Text
Any non-numeric value can be customized through CSS variables, which is useful if you want to translate the various terms or write your own copy.
The below code reproduces all of the default text for the clock; paste it into your CSS and modify as needed. Each block of variables is headed by its corresponding keyword.
digital-clock {
/* {time-of-day} */
--0-3: "late night";
--3-6: "early morning";
--6-9: "morning";
--9-12: "late morning";
--12-15: "afternoon";
--15-18: "late afternoon";
--18-21: "evening";
--21-24: "late evening";
/* {period} */
--am: "AM";
--pm: "PM";
/* {day} */
--sunday: "Sunday";
--monday: "Monday";
--tuesday: "Tuesday";
--wednesday: "Wednesday";
--thursday: "Thursday";
--friday: "Friday";
--saturday: "Saturday";
/* {month-name} */
--january: "January";
--february: "February";
--march: "March";
--april: "April";
--may: "May";
--june: "June";
--july: "July";
--august: "August";
--september: "September";
--october: "October";
--november: "November";
--december: "December";
/* {ordinal} */
--ordinal-1: "first";
--ordinal-2: "second";
--ordinal-3: "third";
--ordinal-4: "fourth";
--ordinal-5: "fifth";
--ordinal-6: "sixth";
--ordinal-7: "seventh";
--ordinal-8: "eighth";
--ordinal-9: "ninth";
--ordinal-10: "tenth";
--ordinal-11: "eleventh";
--ordinal-12: "twelfth";
--ordinal-13: "thirteenth";
--ordinal-14: "fourteenth";
--ordinal-15: "fifteenth";
--ordinal-16: "sixteenth";
--ordinal-17: "seventeenth";
--ordinal-18: "eighteenth";
--ordinal-19: "nineteenth";
--ordinal-20: "twentieth";
--ordinal-21: "twenty-first";
--ordinal-22: "twenty-second";
--ordinal-23: "twenty-third";
--ordinal-24: "twenty-fourth";
--ordinal-25: "twenty-fifth";
--ordinal-26: "twenty-sixth";
--ordinal-27: "twenty-seventh";
--ordinal-28: "twenty-eighth";
--ordinal-29: "twenty-ninth";
--ordinal-30: "thirtieth";
--ordinal-31: "thirty-first";
}
For example, the below CSS modifies the clock to display the current {time-of-day} as emoji:
digital-clock {
--0-3: "🌌🛌💤";
--3-6: "🥱📢🐓";
--6-9: "😪☕️📰";
--9-12: "🌳🏢🚙";
--12-15: "😋🥢🍱";
--15-18: "👩🏽💻👨💻👨🏾💻";
--18-21: "🍺😤🕺";
--21-24: "🏡😵💫🚕";
}