<time datetime="2023-08-24" class="datetime--brief">
        <span class="datetime__month">Aug</span>
    <span class="datetime__date">24</span>
    </time>
{% if datetime is not empty %}
<time datetime="{{ datetime.when|date(datetime.machine) }}" class="{{ datetime.variant }}">
    {% if datetime.brief %}
    <span class="datetime__month">{{ datetime.when|date("M") }}</span>
    <span class="datetime__date">{{ datetime.when|date("d") }}</span>
    {% else %}
    {{ datetime.when|date(datetime.format) }}
    {% endif %}
</time>
{% endif %}
{
  "datetime": {
    "when": "now",
    "format": "M j",
    "machine": "Y-m-d",
    "variant": "datetime--brief",
    "brief": true
  }
}
  • Content:
    // not sure if want.
    
    // time {
    //     font-weight: 700;
    //     text-transform: uppercase;
    //     &.datetime--time {
    //         font-weight: 400;
    //     }
    // }
  • URL: /components/raw/datetime/datetime.scss
  • Filesystem Path: patterns/atoms/text/datetime/datetime.scss
  • Size: 159 Bytes

Displays a date or time.

Variants:

  • time : Displays only the time
  • brief : Short display of the abbreviated month and date only (intended for use in datebox molecules)