Const<!-- Image overlay card -->
<umd-element-card-overlay data-layout="image">
<img slot="image" src="campus-hero.jpg" alt="Campus view">
<p slot="eyebrow">Welcome</p>
<h2 slot="headline">Discover Maryland</h2>
<p slot="text">Join a community of innovators and leaders</p>
<div slot="actions">
<a href="/apply">Apply Now</a>
</div>
</umd-element-card-overlay>
<!-- Color overlay with quote -->
<umd-element-card-overlay data-visual="quote" data-theme="dark">
<h3 slot="headline">"The best investment in our future is education."</h3>
<p slot="text">- President Darryll J. Pines</p>
</umd-element-card-overlay>
<!-- Feature card with CTA icon -->
<umd-element-card-overlay data-layout="image" data-theme="light">
<img slot="image" src="research-bg.jpg" alt="Research lab">
<p slot="eyebrow">Innovation</p>
<h2 slot="headline">Breakthrough Research</h2>
<p slot="text">Solving tomorrow's challenges today</p>
<span slot="cta-icon">→</span>
<div slot="actions">
<a href="/research">Explore Research</a>
</div>
</umd-element-card-overlay>
Overlay Card
A dramatic card component with overlay styling, supporting both image and color backgrounds. Perfect for hero sections and featured content.
Custom Element
<umd-element-card-overlay>Slots
headline- Card title (required, accepts: h2-h6, p)text- Card content (optional, accepts: p)eyebrow- Small text above headlineimage- Background image (required for layout-image)actions- Action buttons or linksdate- Date informationcta-icon- Call-to-action iconAttributes
data-layout- Layout options:image- Use image as backgrounddata-visual- Visual display options:quote- Quote stylingdata-theme- Theme styling options:dark- Dark overlay themelight- Light overlay theme