Const
<!-- Basic event card -->
<umd-element-event>
<h3 slot="headline">Annual Research Symposium</h3>
<p slot="text">Join us for presentations from leading researchers.</p>
<time slot="date-start-iso" datetime="2024-03-15T09:00:00">March 15, 2024 at 9:00 AM</time>
<time slot="date-end-iso" datetime="2024-03-15T17:00:00">March 15, 2024 at 5:00 PM</time>
<p slot="location">Stamp Student Union</p>
</umd-element-event>
<!-- Featured event with image -->
<umd-element-event data-display="feature" data-feature="visual-time">
<img slot="image" src="symposium.jpg" alt="Research symposium">
<p slot="eyebrow">Featured Event</p>
<h2 slot="headline">Maryland Day 2024</h2>
<p slot="text">Experience the university through hands-on activities and demonstrations.</p>
<time slot="date-start-iso" datetime="2024-04-27T10:00:00">April 27, 2024</time>
<p slot="location">Campus-wide</p>
<div slot="actions">
<a href="/register">Register Now</a>
</div>
</umd-element-event>
<!-- Promo event with overlay -->
<umd-element-event data-display="promo">
<img slot="image" src="concert.jpg" alt="Concert venue">
<h3 slot="headline">Spring Concert Series</h3>
<p slot="text">Featuring the UMD Symphony Orchestra</p>
<time slot="date-start-iso" datetime="2024-05-10T19:30:00">May 10, 2024 at 7:30 PM</time>
<p slot="location">Clarice Smith Performing Arts Center</p>
</umd-element-event>
Event Card
A specialized card for displaying event information with date, time, and location. Supports multiple display formats including feature, promo, and list layouts.
Custom Element
<umd-element-event>
Slots
headline
- Event title (required, accepts: h2-h6, p)text
- Event description (accepts: p)date-start-iso
- Event start date/time (required, time element)date-end-iso
- Event end date/time (optional, time element)location
- Event locationimage
- Event imageeyebrow
- Category or type labelactions
- Registration or info linksAttributes
data-display
- Display layout options:feature
- Featured event layout with prominent datepromo
- Promotional layout with image overlaylist
- Compact list layoutdata-feature
- Feature options:visual-time
- Show time in event detailsdata-theme
- Theme styling options:dark
- Dark theme stylingdata-visual
- Visual display options:transparent
- Transparent background