Tickster Styleguide

Appearance

Date ​

When to use it ​

The Date component creates a little date "thumbnail" with date and time information. Nothing more, nothing less. Can be used in Tiles or Cards to highlight an event start date e.g.

WARNING

This component is a candidate for being deprecated due to lack of usage (Webshop, step Select Event being the only known implementation). Also, many of the child element never got any meaningful styling which probably won't be fixed anytime soon.

What it looks like ​

Code examples ​

html
<div class="c-date">
    <span class="c-date__weekday" aria-label="Friday">Fri</span>
    <span class="c-date__day">25</span>
    <span class="c-date__month" aria-label="Februari">Feb</span>
    <span class="c-date__year">2025</span>
</div>
html
<div class="c-date">
    <span class="c-date__weekday" aria-label="Friday">Fri</span>
    <span class="c-date__day">25</span>
    <span class="c-date__month" aria-label="Februari">Feb</span>
    <span class="c-date__year">2025</span>
    <span class="c-date__time">kl 19:30</span>
</div>

Accessibility notes ​

The aria-label attribute in the example above is used to improve accessibility for users who rely on screen readers.

Here, the aria-label="Friday" attribute provides the full name of the weekday for screen readers, while the visible text is abbreviated to "Fri". This ensures that users who cannot see the screen can still understand the full context of the date information.