Const<!-- 3 images, featured video -->
<umd-element-brand-card-stack>
<div slot="cards">
<img src="/library.jpg" alt="McKeldin Library Exterior" />
<img src="/mall-spring.jpg" alt="McKeldin Mall in Spring" />
<img src="/student-center.jpg" alt="Student Center Activities" />
<video data-featured="true" aria-label="UMD Campus Tour">
<source src="/campus-tour.mp4" />
</video>
</div>
</umd-element-brand-card-stack>
<!-- 5 images, featured image, expand feature off -->
<umd-element-brand-card-stack data-image-expand="false">
<div slot="cards">
<img data-featured="true" src="./media/testudo.jpg" alt="Testudo the Mascot" />
<img src="/engineering.jpg" alt="Engineering Building" />
<img src="/arts.jpg" alt="Arts and Humanities Building" />
<img src="/science-hall.jpg" alt="Science Lecture Hall" />
<img src="/athletics.jpg" alt="Athletics Stadium" />
<img src="/dorm.jpg" alt="Student Dormitory" />
</div>
</umd-element-brand-card-stack>
Card Stack
A dynamic component featuring a central "featured" image or video and a supporting set of 5-9 assets that pops into a grid layout in a "stack" style. By default, the featured element expands full screen. Designed for brand storytelling and visual highlights.
Custom Element
<umd-element-brand-card-stack>Slots
cards- Container for 5 - 8 supporting elements (required, accepts: img, video, and element containing img)Attributes
data-featured- Indicates the featured element (required, accepts:"true"or"false")data-image-expand- Expands the Stack layout for interactive or animated display (optional, accepts:"true"or"false")