<div class="hint-box u-inverted">
<span class="hint-box__label">
Bewerben bis </span>
<time class="hint-box__value" datetime="2022-04-27 02:00">
27.
<abbr title="April" class="hint-box__abbr">Apr.</abbr>
2022
</time>
</div>
{% set type = type ??? 'text' %}
{% set showTime = showTime ?? false %}
<div {{ html_attributes({
class: {
'hint-box': true,
'u-inverted': inverted ?? true,
},
}, attrs ?? {}) }}>
<span class="hint-box__label">
{% if label|default %}
{{- label -}}
{% elseif value is instance of('\\DateTimeInterface') %}
{{- value | date('l') -}}
{% elseif value is iterable and value[0]|date('dmY') != value[1]|date('dmY') %}
<abbr title="{{ value[0] | date('l') }}" class="hint-box__abbr">{{ value[0] | date('D') }}</abbr> - <abbr title="{{ value[1] | date('l') }}" class="hint-box__abbr">{{ value[1] | date('D') }}</abbr>
{% elseif value is iterable %}
{{- value[0] | date('l') -}}
{% endif %}
</span>
{% if value is instance of('\\DateTimeInterface') %}
<time class="hint-box__value" datetime="{{ value | date(showTime ? 'Y-m-d' : 'Y-m-d H:i') }}">
{{ value | date('d.') }}
<abbr title="{{ value | date('F') }}" class="hint-box__abbr">{{ value | date('M') }}</abbr>
{{ value|date('Y') != now|date('Y') ? value | date('Y') }}
{{ showTime ? " / #{value | time('short')}" }}
</time>
{% elseif value is iterable %}
<time class="hint-box__value" datetime="{{ value[0] | date(showTime ? 'Y-m-d' : 'Y-m-d H:i') }}/{{ value[1] | date(showTime ? 'Y-m-d' : 'Y-m-d H:i') }}">
{% if value[0]|date('Y') != value[1]|date('Y') %}
{{ value[0] | date('d.') }}
<abbr title="{{ value[0] | date('F') }}" class="hint-box__abbr">{{ value[0] | date('M') }}</abbr>
{{ value[0] | date('Y') }}
–
{{ value[1] | date('d.') }}
<abbr title="{{ value[1] | date('F') }}" class="hint-box__abbr">{{ value[1] | date('M') }}</abbr>
{{ value[1] | date('Y') }}
{{ showTime ? " / #{value[0] | time('short')} - #{value[1] | time('short')}" }}
{% elseif value[0]|date('M') != value[1]|date('M') %}
{{ value[0] | date('d.') }}
<abbr title="{{ value[0] | date('F') }}" class="hint-box__abbr">{{ value[0] | date('M') }}</abbr>
–
{{ value[1] | date('d.') }}
<abbr title="{{ value[1] | date('F') }}" class="hint-box__abbr">{{ value[1] | date('M') }}</abbr>
{{ value[1]|date('Y') != now|date('Y') ? value[1] | date('Y') }}
{{ showTime ? " / #{value[0] | time('short')} - #{value[1] | time('short')}" }}
{% elseif value[0]|date('d') != value[1]|date('d') %}
{{ value[0] | date('d.') }}
–
{{ value[1] | date('d.') }}
<abbr title="{{ value[1] | date('F') }}" class="hint-box__abbr">{{ value[1] | date('M') }}</abbr>
{{ value[1]|date('Y') != now|date('Y') ? value[1] | date('Y') }}
{{ showTime ? " / #{value[0] | time('short')} - #{value[1] | time('short')}" }}
{% else %}
{{ value[0] | date('d.') }}
<abbr title="{{ value[0] | date('F') }}" class="hint-box__abbr">{{ value[0] | date('M') }}</abbr>
{{ value[0]|date('Y') != now|date('Y') ? value[1] | date('Y') }}
{{ showTime ? " / #{value[0] | time('short')} - #{value[1] | time('short')}" }}
{% endif %}
</time>
{% else %}
<span class="hint-box__value">
{{- value -}}
</span>
{% endif %}
</div>
{
"label": "Bewerben bis",
"value": "2022-04-27T00:00:00.000Z"
}
:root {
--hint-box-background-color: var(--color-midnight);
--hint-box-font-size: 1.8rem;
--hint-box-min-width: none;
--hint-box-padding-inline: 1.25em;
--hint-box-text-color: var(--color-white);
--hint-box-width: auto;
--hint-box-height: 10rem;
}
.hint-box {
background-color: var(--hint-box-background-color);
block-size: var(--hint-box-height);
color: var(--hint-box-text-color);
display: inline-flex;
flex-direction: column;
font-size: var(--hint-box-font-size);
inline-size: var(--hint-box-width);
justify-content: center;
max-inline-size: 100%;
min-inline-size: var(--hint-box-min-width);
padding-inline: var(--hint-box-padding-inline);
white-space: nowrap;
}
.hint-box__label {
font-size: 0.8em;
line-height: 1.2em;
margin-block-end: 0.625em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hint-box__value {
font-size: 1.125em;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.hint-box__abbr {
text-decoration: none;
}
No notes defined.