The date block provides a consistent visual display for event dates within event listings, helping users quickly scan and identify information about timings. The component provides context in a visually consistent way, and uses distinct visual states (upcoming, past, etc.) to reduce cognitive load.
Do's
- in the case of a multi-day event, make sure you input the starting date as this is the one that will be displayed
- use the appropriate status state to accurately reflect the event's (upcoming, past, etc.) state
Don'ts
- don't use date blocks as standalone components without supporting context or event information
When to use
- use for any type of event (conference, meeting, forum, workshop, seminar, etc.)
- for single or multi-day events, currently ongoing events, cancelled events, future and past events
- in content structures (i.e. Related section) where consistent date presentation improves scannability and reduces decision time
When not to use
- do not use to display information about timings such as historical milestones or biographical timelines. Use the Timeline component instead