Skip to main content

Timestamp

Timestamps displays a date when an event occurred. 

Use the Timestamp component to represent the date an event occurred, such as when a webpage was created or updated.

Examples​

Default​

This page was updated . 
<div class="bux-timestamp">
  <span class="bux-timestamp__icon" aria-hidden="true"></span>
  <div class="bux-timestamp__details">
    This page was updated
    <time datetime="2025-11-25">Tuesday, Nov. 25, 2025</time>.
  </div>
</div>

Usage​

Do's​

  • Use AP style for format dates, meaning the full date:
    • Spell out the day of the week in words, such as "Thursday"
    • Months can be abbreviated, except for March, April, May, June, July
    • Use numerals for the day, such as "25"
    • Give the full four-digit year, such as "2026", not a two-digit abbreviation
  • Use a minimum of month, day and year.
  • For static, informational webpages, placement below content is common.
  • For dynamic, time-sensitive content (news or blogs), placement near the headline is common.

Dont's​

  • Do not use ordinal numbers, for example, 1st, 2nd, 3rd, etc.
  • Do not display dates using numerals only, such as "01-23-25". Date formatting differs greatly from country to country and can cause confusion, reducing usability.

Implementation notes​

The timestamp component follows AP date style. When rendered with the provided template, the component automatically formats the supplied date into the correct output.

Back to top