Const<!-- Basic grid hero with images -->
<umd-element-hero-grid>
<div slot="column-left">
<img src="left1.jpg" alt="Campus view">
<img src="left2.jpg" alt="Students">
</div>
<div slot="column-center">
<img src="center1.jpg" alt="Main building">
<img src="center2.jpg" alt="Research lab">
</div>
<div slot="column-right">
<img src="right1.jpg" alt="Athletics">
<img src="right2.jpg" alt="Library">
</div>
</umd-element-hero-grid>
<!-- Grid hero with center video -->
<umd-element-hero-grid>
<div slot="column-left">
<img src="left1.jpg" alt="Campus life">
<img src="left2.jpg" alt="Student activities">
<img src="left3.jpg" alt="Dining">
</div>
<div slot="column-center">
<img src="center1.jpg" alt="Aerial view">
<video autoplay muted loop>
<source src="campus-tour.mp4" type="video/mp4">
</video>
<img src="center2.jpg" alt="Graduation">
</div>
<div slot="column-right">
<img src="right1.jpg" alt="Research">
<img src="right2.jpg" alt="Innovation">
<img src="right3.jpg" alt="Community">
</div>
</umd-element-hero-grid>
Grid Hero Component
A three-column grid hero with scroll-triggered animations that progressively focus on center content. Creates an immersive visual experience with smooth transitions between grid states.
Custom Element
<umd-element-hero-grid>Slots
column-left- Left column container for imagescolumn-center- Center column container for images and optional videocolumn-right- Right column container for imagesVisual Behavior