PatternFly

Numerics

Date and time formats

All date and time formats should be localizable, not hard-coded. When building localizable date and time formats, development teams should share the same library by using resources like date-fns or Day.js.

PatternFly date and time formats follow the American standard. When localizing, use the appropriate format for the language locale and follow ISO standards.

Element
Guideline
Example
Date
Use Month DD, YYYY
September 17, 2020

Sep 17, 2020
Date numeric value
When you represent the date as a numeric value or label, use MM-DD-YYYY.
09-17-2020
Time
Display time in either 12-hour or 24-hour (UTC) time.
12-hour: 3:00 PM

With seconds: 3:30:11 PM

24-hour: 15:00
12-hour time notation
This time convention divides the 24 hours of the day into 2 periods of 12 hours, AM and PM.

12-hour time notation is the American standard.
3:00 PM
24-hour time notation
This time convention divides the day by 24 hours and runs from midnight to midnight. The hours are represented from 0 to 23.
14:00
Date and time
Include the timestamp, along with the timezone, after the date.
Thursday, January 21, 2019 9:38:11 PM EST

Thursday, 21 January 2019, 9:38:11 PM EST

07 Jan 2019, 23:33 UTC
Time zone
Display time in the user's time zone or in UTC.

Use UTC when spanning multiple time zones.

Avoid mentioning if a time zone uses Standard Time or Daylight Saving Time.
Maintenance begins today at 14:00 UTC (2 PM EST).
Day
Write out the full name of the day. If space is limited, use the day’s 3-letter abbreviation:
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • Sun
Monday, September 17, 2020

Mon, Sep 17, 2020
Month
Write out the full name of the month. If space is limited, use the month’s 3-letter abbreviation.
  • Jan
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul
  • Aug
  • Sep
  • Oct
  • Nov
  • Dec
September 17, 2020

Sep 17, 2020
Duration
HH:MM:SS or HH:MM
03:15:30

03:15

00:15

Absolute or relative time

Whether you use absolute or relative timestamps will depend on context.

Absolute time

To represent the exact date and time that an event occurred, use an absolute timestamp. For example, "07 Jan 2020, 23:33 UTC". For more examples, reference the table of date and time formats.

Relative time

To represent how long ago an event occurred, use a relative timestamp. When reporting relative time, align with the following language:

Time frame
Guideline
Relative timestamp(s)
Less than 1 minute ago
Do not display time in seconds or milliseconds.
Just now
Less than 1 hour ago
Display time in minutes, rounded to the nearest minute.
1 minute ago

4 minutes ago
Less than 1 day ago
Display time in hours, rounded to the nearest hour.
1 hour ago

4 hours ago
Less than 1 month ago
Display time in days.
1 day ago

24 days ago
Less than 1 year ago
Display time in months, rounded to the nearest month.
1 month ago

10 months ago
1 or more years ago
Display time in years, rounded to the nearest year.
1 year ago

5 years ago

Numbers and currency

To allow users to more quickly scan through content, use numerals instead of written numbers.

Before
After
Your transaction will be complete in three business days.
Your transaction will be complete in 3 business days.
You have a credit of two dollars.
You have a credit of US$2.00.

Digit grouping

When grouping digits within large numbers, use the American notation standard. Separate thousands with a comma and separate cents with a decimal. For example:

  • 1,000,000,000
  • 1,000,000.00

Currency

When displaying currencies that only use the "$" symbol, add the first 2 letters of the ISO currency code. For example:

  • US$1,500 (United States)
  • AU$1,500 (Australia)
  • HK$1,500 (Hong Kong)
  • CA$1,500 (Canada)

For other currencies, use their 3-letter ISO code wherever possible. You can use national currency symbols, but keep in mind that some users may not be familiar with them. When in doubt, default to ISO. For example:

  • GBP 1,500 or £1,500 (British pound)
  • EUR 1,500 or €1,500 (Euro)
  • JPY 1,500 or ¥1,500 (Japanese Yen)

Use a currency's ISO 3-digit numeric code when writing for computerized systems or for countries that don't use Latin scripts.

Country
Currency
Alphabetic code
Numeric code
United States
Dollar
USD
840
China
Yuan
CNY
156
European Union
Euro
EUR
978
United Kingdom
Pound
GBP
826

Generally, we don't provide currency conversions.


View source on GitHub