Data formats - Patterns - Material Design (original) (raw)
Different types of numeric and linguistic data are represented using data formats.
Date and time values may be formatted to depict ranges, time zones, abbreviations, and more, as appropriate to the context.
Data redaction and truncation guidelines describe how to represent truncated numbers and disguise sensitive data.
Formats represented
Time
Month, day, year
Approximating time
Absolute time
Time zones
Abbreviations
Rounded numbers
Data truncation and time display examples
Contents
Date & time Expand and collapse content An arrow that points down when collapsed and points up when expanded.
Date and time
How you format the date and time depends on a few factors:
- If the time or date is the current one
- Whether you are using the 12-hour or 24-hour clock
- How specific you need to be
| Element | Description | Example |
|---|---|---|
| Time | Within the current day, display the time using uppercase AM or PM, without periods. If you are using the 24-hour clock, display the time without AM/PM.Many non-English languages use lowercase am and pm. | 2:00 PM14:00 |
| Month, day, and year | Within the current calendar year, display the date without the year. Otherwise, display the date and year. | January 1414 January 2012 |
| Approximate time | Approximate time rounds down to the largest and most recent date or time unit. | In 5 minutes3 days ago |
| Absolute time | When approximate time isn’t appropriate, display the specific date and/or time. | Today, 10:00 AM |
Time and date ranges
Date and time ranges are formatted based on the following:
- The year is the same on both sides of the range
- It’s the current year on both sides of the range
- Whether both times have the same AM or PM
| Range element | Description | Example |
|---|---|---|
| En dash | Separate a range of dates or times with an en dash, without spaces. Add spaces when spelling out months, or to remove ambiguity. | 8:00 AM–12:30 PM6 Jan – 2 Feb |
| Year | Show the year on both the start and end, unless both dates have the current year. | Dec 6, 2013–Jan 2, 2014January 4–6, 2014 |
| AM/PM | Use a single AM or PM at the end of the range, if both times have the same AM/PM. | 8:00–10:30 AM |
Time zones
As time zones vary across regions, time zone usage should be both clear and relevant.
| Types of time zones | Description | Example |
|---|---|---|
| Single-digit hours | Remove the leading 0 for single digit hours. | UTC+5:00 |
| Single times zones | Use two-letter time zones when referring to a single time zone. Remove the S (for Standard) or D (for Daylight). | Open 4–10 PM ET |
| Combination time zones | When specifying a date for a nationwide audience, include Standard or Daylight acronyms (such as EDT) to avoid confusion. Some U.S. states, such as Arizona, don't use daylight savings time. | The first game is on April 13, 2015 at 4 PM EDT. |
Date and time modifications by context
Depending on the context, show either date or time, or both date and time.
| Context | Description | Example |
|---|---|---|
| Future | Include time to a future day or date. | 10 Jan, 08:00 |
| Past | When referring to a past time, display both date and time. | Reminded Jan 5, 7:16 AM |
| Distant past | Omit the time for events in the distant past. | 3 Jan |
| Weekday | When referring to a day of the week, such as for Calendar invites, display the abbreviated day separated by a comma. | Mon, Jan 10, 8:00 AM |
| Duration | Show the duration of a recording, like audio or video, in the format H:MM:SS. Omit hours or seconds if they don’t apply.Use the same format across the same context. A video labelled “3:15” referring to hours and minutes, should not use that time format later on that page to refer to minutes and seconds. | 0:301:01:05 |
Abbreviations
Where space is limited, use abbreviations for months and days.
| Time period | Description | Example |
|---|---|---|
| Months | Months can be abbreviated or numeric. Many languages do not abbreviate month names. | Jan 63/12/12 |
| Date format | The US date format is month/day/year, but other countries use day/month/year. | March 12, 2012 written as 03/12/12 could be misinterpreted to mean December 3, 2012 across different users. |
| Days of the week | Days of the week may be abbreviated using the first letter of each day. | S for SundayM for Monday |
| Day and time | Abbreviated days of the week may be combined with a time. | Sun, 2:00 PMSun, 14:00 |
| Rounded numbers | Abbreviated numerical units, which remove the “:00,” are appropriate for timestamps, labels on graphs, durations, etc. | 8 AM2 hr 32 min ago |
Talking about date and time
Display date and time information as people normally speak to each other, when space is available.
- Refer to yesterday or tomorrow in those terms
- If the day is in the upcoming week, display the day of the week (such as Tuesday)
- Describe a time of day in other ways that promote understanding, such as, “Store open 9:00 AM–Midnight” or “Reminder for tomorrow afternoon”
Data redaction and truncation Expand and collapse content An arrow that points down when collapsed and points up when expanded.
Redacting numbers
Midline ellipses [• • •] are bulleted characters that partially hide sensitive data. They indicate when a number, such as a credit card or Social Security number, is not entirely visible.
When to use 3 ellipses
To redact most numbers, like Social Security numbers, use three midline ellipses [• • •].
You may use this format across typefaces and platforms:
1. Place two regular spaces before the first midline ellipse
2. Then add a thin space between each midline ellipse and after the final one
Or, use the Unicode string instead: U0020,U0020,U2022,U2006,U2022,U2006,U2022,U2006
When to use 4 ellipses
Credit and debit card data must be redacted using four midline ellipses [• • • •].
Written in Unicode:
U0020,U0020,U2022,U2006,U2022,U2006,U2022,U2006,U2022,U2006
Visa • • • • 1234
Do.
Ellipses for credit card redaction
Redacting letters
Baseline ellipses [...] represent letters, words, or phrases that aren’t shown. They also represent when a name or email address is only partially visible.
Usage
Type the ellipses as three periods in a row (or Unicode character U2026) after the last letter shown.
PayPal krestovozdvizhensky@goog…
Do.
Redacted email address with three baseline ellipses.