<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
}
}
// not sure if want.
// time {
// font-weight: 700;
// text-transform: uppercase;
// &.datetime--time {
// font-weight: 400;
// }
// }
Displays a date or time.
Variants:
time
: Displays only the timebrief
: Short display of the abbreviated month and date only (intended for use in datebox molecules)