Date Details

The Date Details component displays the day of the week and start time for events in a compact, easy-to-read format.

Variants

Outlined - Day and time separated by a border with background fill

Divider - Day and time separated by a simple divider line

Simple - Minimal style with no borders or backgrounds

Orientations

Horizontal - Day and time displayed side-by-side

Vertical - Day stacked above time

Features

• Automatically formats dates into readable day/time format
• Compact design that fits in tight spaces
• Multiple visual styles to match different contexts
• Handles invalid dates gracefully

When to Use

• Use in event cards and listings to show when games start
• Choose horizontal orientation for wider layouts
• Choose vertical orientation for narrow spaces or mobile views
• Use outlined variant for emphasis
• Use simple variant for minimal, clean designs