Const<!-- Basic icon card -->
<umd-element-card-icon>
<img slot="image" src="/icons/research.svg" alt="Research icon">
<h3 slot="headline">Research Excellence</h3>
<p slot="text">Cutting-edge research across disciplines</p>
</umd-element-card-icon>
<!-- Dark theme icon card -->
<umd-element-card-icon data-theme="dark">
<img slot="image" src="/icons/education.svg" alt="Education icon">
<h3 slot="headline">Academic Programs</h3>
<p slot="text">Over 200 degree programs to choose from</p>
</umd-element-card-icon>
<!-- Service highlight cards -->
<div class="services-grid">
<umd-element-card-icon>
<img slot="image" src="/icons/library.svg" alt="Library">
<h4 slot="headline">Libraries</h4>
<p slot="text">Access to millions of resources</p>
</umd-element-card-icon>
<umd-element-card-icon>
<img slot="image" src="/icons/support.svg" alt="Support">
<h4 slot="headline">Student Support</h4>
<p slot="text">Comprehensive academic assistance</p>
</umd-element-card-icon>
</div>
Icon Card
A card component with an icon overlay design, perfect for highlighting services, features, or categories with visual emphasis.
Custom Element
<umd-element-card-icon>Slots
headline- Card title (required, accepts: h2-h6, p)text- Card description (optional, accepts: p)image- Icon or image (required)Attributes
data-theme- Theme styling options:dark- Dark theme styling