Time And Date




Date

Default

Oct 1

Aug 2, 2012

Sat
Dec 2, 2017


Oct 1

Aug 2, 2012

Sat
Dec 2, 2017

Variants

Oct 1

Oct 1

Oct 1

Sun
Oct 1

Sun
Oct 1

Alignment

Sun
Oct 1


Sun
Oct 1


Sun
Oct 1

Timezones

East Coast (Default)
Oct 1

West Coast
Oct 1

Toyko, Japan
Oct 1

Anti-pattern example
Oct 1
Date.today ignores Timezone

DateTime respects Timezone
Oct 2
'.now' in Australia is tomorrow (if you're EST after 10am)

String Dates
Aug 1, 2012
Defaults to UTC, then changes due to EST Timezone.

Depending on the data you send to the date prop you might have unexpected results due to ruby Date and DateTime classes.

Don't care about timezones? Use Date.

If you need a date that recognizes a timezone, especially when paired with the Time kit, leverage DateTime.

Unstyled

Example with no year
Oct 1

Example with wrapping typography kit

Aug 2, 2012


Example with icon + subcaption
Thu
Aug 2, 2012

For alternative typography styles, you can pass a boolean prop called unstyled to the Date kit and wrap it in any of our typography kits (Title, Body, Caption, etc.). This will allow the Date kit to inherit any of our typography styles.

Date Range Inline

Default






Date Range Stacked

Default

18 JUN

2019

20 MAR

2020

Date Stacked

Default

Oct


Oct


Not Current Year

Mar


Mar


Day & Month Reverse

Oct


Oct


Sizes

Oct


Oct


Alignment

Oct


Oct


Oct


Oct


Oct


Oct


Bold

Oct


Mar


Oct


Date Time

Default

Sun
Oct 1

Sun
Oct 1

Oct 1

Oct 1

Alignment

Oct 1

Oct 1

Oct 1

Size

Sun
Oct 1

Oct 1


Sun
Oct 1

Oct 1

Date Time Stacked

Default

Oct


Mar


Oct


Oct


Date Year Stacked

Default

1 OCT

2023


1 OCT

2023


1 OCT

2023

Use this kits on table displays or column headers to display a single date format.

Time

Default










Use this anywhere needed to display a certain timestamp

Sizes



Timestamp Values




Handling Timezones

East Coast


Central


Mountain


West Coast


Toyko, Japan


Simply enter the timezone you would like to use and it will appear.

The list of supported timezones is exhaustive and we're most likely to only use timezones from the Americas so we've highlighted those in the examples.

However, if you need to support another timezone you should be able to Google a specific list, otherwise you can follow the string pattern and try entering a continent and a city.

Remember, this is just labeling the timezone, please verify the actual time for a specified timezone is rendering properly.

Format: <Continent>/<Large_City_Name>

Continent Options: America | Europe | Asia | Africa | Pacific | India | Atlantic | Australia

Alignment




Unstyled

Example with no year

Example with wrapping typography kit


Example with icon + subcaption

For alternative typography styles, you can pass a boolean prop called unstyled to the Time kit and wrap it in any of our typography kits (Title, Body, Caption, etc.). This will allow the Time kit to inherit any of our typography styles.

Time Range Inline

Default

11:49a 1:49p

11:49a 1:49p


11:49a 1:49p EDT

11:49a 1:49p EDT


11:49a 1:49p

11:49a 1:49p


11:49a 1:49p EDT

11:49a 1:49p EDT

Time Stacked

Default




Timestamp

Default

10:50a

Oct 1 · 10:50a

Oct 1, 2027 · 10:50a

Oct 1, 2022 · 10:50a

Alignments

10:50a

Oct 1 · 10:50a

Oct 1, 2027 · 10:50a

Oct 1, 2022 · 10:50a


10:50a

Oct 1 · 10:50a

Oct 1, 2027 · 10:50a

Oct 1, 2022 · 10:50a


10:50a

Oct 1 · 10:50a

Oct 1, 2027 · 10:50a

Oct 1, 2022 · 10:50a

Timezones

10:50a EDT

Oct 1 · 10:50a EDT

Oct 1, 2027 · 10:50a EDT

Oct 1, 2022 · 10:50a EDT

10:50p HKT

Oct 1 · 10:50p HKT

Oct 1, 2027 · 10:50p HKT

Oct 1, 2022 · 10:50p HKT


Last Updated by

Last updated by Maricris Nonato on Oct 1 at 10:50a

Last updated on Oct 1 at 10:50a

Time Ago

Last updated by Maricris Nonato less than a minute ago

Last updated less than a minute ago

less than a minute ago

Unstyled

Basic unstyled example
Oct 1 · 10:50a

Example with wrapping typography kit

Oct 1 · 10:50a


For alternative typography styles, you can pass a boolean prop called unstyled to the Timestamp kit and wrap it in any of our typography kits (Title, Body, etc.). This will allow the Timestamp kit to inherit any of our typography styles.

Weekday Stacked

Default


Compact


Variant