Date

Done

The date component standardizes the various ways dates can be displayed in our platform.

Anatomy

Dates may appear in a variety of formats throughout the platform. Dates may be Standard, Abbreviated, Numeric, or Stacked. All dates contain some combination and layout of a number of atoms.

Note: All atoms are optional.

Day of the week
Month
Day
Year

Dates should always include as much information as the use-case allows (i.e. use the Standard variant before the others whenever possible). The year should always be expressed in a four digit format. For any scenario not covered in this documentation, reach out to a technical writer for assistance.

Standard

Day of the week
Month
Day
Year

Whenever possible, use the Standard date format. This format includes a fully written version of the day, month, and year. When excluding the fully written day, also exclude the comma to the left of the month.

Abbreviated

Day of the week
Month
Day
Year

In some cases Abbreviated date formats may be preferred to save space. Whenever abbreviating any part of the date, always abbreviate the other written atoms. Never abbreviate the day of the week without abbreviating the month, and vice versa. When the day isn’t presented in this format, don’t include the comma separating the day and the year.

Numeric

While this date format is not preferred, it may be necessary in some rare cases (such as numeric date inputs). The values in this version are separated by hyphens. Always format numeric dates this way, in keeping with the ISO 8601 international standards.

Month (optional)
Day (optional)
Year (optional)

Stacked

Year header - Overline
Month - Overline
Day - Small heading

Stacked dates make it possible to create vertical timelines within the product. Whenever using a stacked date, the year may be displayed as a sticky header, disconnected from the month/day molecule. This version should always use a three character, abbreviated version of the month to conserve horizontal space.

Specs

Color

Element	Property	Value
Text	Text color	Defined by design

Spacing

Other than the Stacked variant, all dates should be implemented in the form of text, letting the natural spacing of the fonts dictate the space within the molecule.

The spacing above specifies the minimum distance between the year and a stacked date molecule. However, in some cases the year may be a sticky header for the scrolling cell within a view. Whenever this is the case, the stacked date molecule should be cropped out of view whenever it scrolls into this minimum distance region.

States

There are no state considerations for this component.

Theming

There are no theming considerations for this component.

Placement

Dates can be placed wherever they support other content. Avoid overuse of the stacked date components.

Behavior

There are no behavior considerations for this component.

Developer Docs

Vue Developer Docs

Component documentation coming soon!