Const<!-- Basic event with date -->
<umd-element-events-date>
<h3 slot="headline">Spring Commencement</h3>
<time slot="date-start-iso" datetime="2024-05-22">May 22, 2024</time>
</umd-element-events-date>
<!-- Multi-day event -->
<umd-element-events-date>
<h2 slot="headline">Orientation Week</h2>
<time slot="date-start-iso" datetime="2024-08-26">August 26, 2024</time>
<time slot="date-end-iso" datetime="2024-08-30">August 30, 2024</time>
</umd-element-events-date>
<!-- Dark theme event -->
<umd-element-events-date data-theme="dark">
<h3 slot="headline">Guest Lecture: Future of AI</h3>
<time slot="date-start-iso" datetime="2024-04-15T18:00:00">April 15, 2024 6:00 PM</time>
<time slot="date-end-iso" datetime="2024-04-15T20:00:00">April 15, 2024 8:00 PM</time>
</umd-element-events-date>
Event Date Lockup
A text component that displays event information with a formatted date sign. Automatically creates a visual date display from ISO date strings and pairs it with event headlines. Responsive sizing adjusts based on viewport.
Custom Element
<umd-element-events-date>Slots
headline- Event title or headline (optional, accepts: heading elements)date-start-iso- Event start date in ISO format (optional, accepts: time element)date-end-iso- Event end date in ISO format (optional, accepts: time element)Attributes
data-theme- Color theme of the component:dark- Dark background with light textObserved Attributes
resize- Triggers recalculation of date element sizes