Skip to main content

Time

Represents a specific point or duration in time. Use to display dates, times, or durations clearly and consistently. May include a machine-readable datetime attribute for improved accessibility and functionality.

Support
Targets (29)

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to propertiesProperties

Anchor to dateTime
dateTime
string
Default: ''

Set the time and/or date of the element.

It must be a valid date string.

Anchor to id
id
string

A unique identifier for the element.

Examples
<s-time dateTime="2023-10-15">October 15, 2023</s-time>

Preview

Anchor to best-practicesBest Practices

  • Use Time component for displaying time values to ensure consistent formatting.

  • Provide time values in a clear, readable format.

  • Consider using 24-hour format for international audiences.

  • Include timezone information when relevant.

  • Use Time component for any time-related content to maintain semantic meaning.

Was this page helpful?