<div class="gallery-filmstrip gallery-filmstrip--durp" tabindex="-1" data-gallery-filmstrip data-filmstrip-modal>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="0">
<button class="gallery-filmstrip__slide-button" data-slide-button="0" data-is-button-shown="true" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/1348/960?random=1" alt="alt text 1">
</picture>
<figcaption class="captioned-image__caption">
Image caption changes as the user swipes through.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--dark" data-caption data-is-caption-shown="true">
Image caption changes as the user swipes through.
</div>
</div>
</div>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="1">
<button class="gallery-filmstrip__slide-button" data-slide-button="1" data-is-button-shown="false" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__video-container">
<div class="gallery-filmstrip__video">
<img class="gallery-filmstrip__video-splash-image" src="https://i.ytimg.com/vi/jVIwpjHazmg/hqdefault.jpg" alt="Caption of the video" data-splash-image>
<iframe class="gallery-filmstrip__video-iframe" src="" title="Caption of the video" data-video-src="https://www.youtube.com/embed/jVIwpjHazmg?feature=oembed&autoplay=1" frameborder="0" style="display: none;" allow="autoplay"></iframe>
<img class="gallery-filmstrip__video-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1YAAAHgCAIAAAApMmt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEv0lEQVR4nO3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC+BsauAAH5v2KcAAAAAElFTkSuQmCC"
alt="Caption of the video">
<button class="gallery-filmstrip__video-play" data-video-play data-is-play-button-shown="false" aria-label="play video">
<span class="play-button">
<svg class="play-button__oval" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68" viewBox="0 0 68 68">
<defs>
<circle id="prefix__a" cx="32" cy="32" r="32"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(2 2)">
<use fill="#000" fill-opacity=".5" xlink:href="#prefix__a"/>
<circle cx="32" cy="32" r="33" stroke="#000" stroke-opacity=".5" stroke-width="2"/>
<circle cx="32" cy="32" r="31" stroke="#FF552E" stroke-linejoin="miter" stroke-width="2"/>
</g>
</svg>
<svg class="play-button__arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
<path fill="#F5F5F5" fill-rule="evenodd" d="M24 44L24 20 44 32z" transform="translate(-24 -20)"/>
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--dark" data-caption data-is-caption-shown="false">
Caption of the video
</div>
</div>
</div>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="2">
<button class="gallery-filmstrip__slide-button" data-slide-button="2" data-is-button-shown="false" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=2" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/1348/960?random=2" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--dark" data-caption data-is-caption-shown="false">
This one has a caption, too.
</div>
</div>
</div>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="3">
<button class="gallery-filmstrip__slide-button" data-slide-button="3" data-is-button-shown="false" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/900/1100?random=3" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/900/1100?random=3" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--dark" data-caption data-is-caption-shown="false">
This one has a caption, too.
</div>
</div>
</div>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="4">
<button class="gallery-filmstrip__slide-button" data-slide-button="4" data-is-button-shown="false" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=4" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/1348/960?random=4" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--dark" data-caption data-is-caption-shown="false">
This one has a caption, too.
</div>
</div>
</div>
</div>
<div class="gallery-filmstrip__controls-container gallery-filmstrip--durp
" data-filmstrip-controls>
<div class="gallery-filmstrip__controls">
<button class="gallery-filmstrip__control-button-previous" type="button" aria-label="Go to previous carousel item" data-controls-prev>
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</button>
<button class="gallery-filmstrip__control-button-next" type="button" aria-label="Go to next carousel item" data-controls-next>
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</button>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="gallery-filmstrip gallery-filmstrip--{{ siteUnit }}" tabindex="-1" data-gallery-filmstrip
data-filmstrip-modal>
{% for item in component.media %}
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--{{ component.mediaSize }}"
data-carousel-index="{{ loop.index0 }}">
<button class="gallery-filmstrip__slide-button" data-slide-button="{{ loop.index0 }}"
data-is-button-shown="{{ loop.first ? true : false }}" aria-label="expand/collapse media">
{% include 'bits/icons/expand.twig' %}
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div
class="gallery-filmstrip__media-container gallery-filmstrip__media-container--{{ component.mediaSize }}">
{% if item.media_type == 'Image' %}
<div class="gallery-filmstrip__image-container">
{{ imageMacros.createHeightOnlyCropForGallery(item.media, 900) }}
</div>
{% else %}
<div class="gallery-filmstrip__video-container">
<div class="gallery-filmstrip__video">
<img class="gallery-filmstrip__video-splash-image" src="{{ item.media.thumbnail_url }}"
alt="{{ item.media.caption | escape }}" data-splash-image>
<iframe class="gallery-filmstrip__video-iframe" src="" title="{{ item.media.caption }}"
data-video-src="{{ item.media.src }}" frameborder="0" style="display: none;"
allow="autoplay"></iframe>
<img class="gallery-filmstrip__video-placeholder"
src="{{ item.media.dimensionSizingImage }}" alt="{{ item.media.caption | escape }}">
<button class="gallery-filmstrip__video-play" data-video-play
data-is-play-button-shown="false" aria-label="play video">
{% include 'bits/icons/play-button/play-button.twig' %}
</button>
</div>
</div>
{% endif %}
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--{{ background }}"
data-caption
data-is-caption-shown="{{ loop.first ? true : false }}">
{{ item.media.caption | raw }}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="gallery-filmstrip__controls-container gallery-filmstrip--{{ siteUnit }}
{{ component.hideTitle ? 'gallery-filmstrip__controls-container--no-title' }}" data-filmstrip-controls>
<div class="gallery-filmstrip__controls">
<button
class="gallery-filmstrip__control-button-previous" type="button" aria-label="Go to previous carousel item"
data-controls-prev>
{% include "bits/icons/left-chevron.twig" %}
</button>
<button class="gallery-filmstrip__control-button-next" type="button" aria-label="Go to next carousel item"
data-controls-next>
{% include "bits/icons/right-chevron.twig" %}
</button>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"component": {
"type": "gallery",
"displayType": "slideshow",
"title": "A header passed in as a string",
"shortDescription": "this is a short description",
"body": "<p>Studying urban planning at UIUC means you have access to the resources, facilities, and minds of a global R1 university. It also makes you part of a long tradition—planning has been offered at Illinois since 1912.</p><p>Getting involved in planning issues at all levels is easy in Champaign-Urbana. Work with three plan commissions, two city councils, a county board, the Bicycle and Pedestrian Advisory Board, the Sustainability Advisory Commission, the Community Development Commission, and more!</p>",
"media": [
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/1348/960?random=1",
"altText": "alt text 1",
"caption": "Image caption changes as the user swipes through."
}
},
{
"media_type": "Video",
"media": {
"url": "https://www.youtube.com/watch?v=jVIwpjHazmg",
"src": "https://www.youtube.com/embed/jVIwpjHazmg?feature=oembed&autoplay=1",
"caption": "Caption of the video",
"thumbnail_url": "https://i.ytimg.com/vi/jVIwpjHazmg/hqdefault.jpg",
"dimensionSizingImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1YAAAHgCAIAAAApMmt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEv0lEQVR4nO3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC+BsauAAH5v2KcAAAAAElFTkSuQmCC",
"width": 854,
"height": 480
}
},
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/1348/960?random=2",
"altText": "alt text 2",
"caption": "This one has a caption, too."
}
},
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/900/1100?random=3",
"altText": "alt text 2",
"caption": "This one has a caption, too."
}
},
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/1348/960?random=4",
"altText": "alt text 2",
"caption": "This one has a caption, too."
}
}
],
"mediaSize": "Large",
"callToAction": {
"text": "Click this button",
"url": "#"
}
}
}
.gallery-filmstrip
transition all ease-in-out 200ms
display flex
flex-grow 0
flex-shrink 0
position relative
width 100vw
+below(768px)
margin-bottom 45px
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
--iconBackgroundColorActive illiniOrange
&--dark
--bodyColor grey
--captionColor grey
&--arch
--borderColor industrialBlue
--captionColor greyDarkest
--iconFillColor industrialBlue
--iconFillColorActive white
--iconBackgroundColorActive industrialBlue
&--art
--borderColor archesBlue
--captionColor greyDarkest
--iconFillColor archesBlue
--iconFillColorActive white
--iconBackgroundColorActive archesBlue
&--college
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&--dance
--borderColor archesBlue
--captionColor greyDarkest
--iconFillColor archesBlue
--iconFillColorActive white
--iconBackgroundColorActive archesBlue
&--durp
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
--iconBackgroundColorActive illiniOrange
&--landarch
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive black
--iconBackgroundColorActive illiniOrange
&--theatre
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&__slide
transition opacity 200ms ease-in-out
&__slide-container
position relative
&--Large
max-height 530px
&--Medium
max-height 338px
&__slide-button
@extends $slide-button
&__media-container
& img
& iframe
height 100%
max-width: 50vw;
object-fit cover
object-position center
+below(1000px)
max-width 88vw
& iframe
position absolute
height 100%
width 100%
background-color black
&--Medium
height 288px
&--Large
height 480px
+below(largeDeviceBreakpoint)
height 360px
&--Medium iframe
height 288px
&--Medium iframe
&--Medium img
+below(mediumDeviceBreakpoint)
height 192px
max-width 90vw
&--Large iframe
+below(largeDeviceBreakpoint)
height 360px
+below(mediumDeviceBreakpoint)
height 192px
+below(mediumDeviceBreakpoint)
height 192px
& .captioned-image__caption
display none
&__image-container
&__video-container
&__video
height 100%
&__image-container .captioned-image__picture
&__video
max-width 50vw
position relative
+below(1000px)
max-width 88vw
height 100% !important;
&__video-splash-image
position absolute
&__video-play
@extends $video-play
transition all 200ms ease-in-out
visibility hidden
opacity 0
&[data-is-play-button-shown="true"]
visibility visible
opacity 1
&__caption
transition all 400ms ease-in-out
&[data-is-caption-shown="true"]
opacity 1
visibility visible
&[data-is-caption-shown="false"]
opacity 0
visibility hidden
&__caption
@extends $detail
border-top 2px solid var(--borderColor)
color var(--captionColor)
margin-top 24px
padding-top 8px
&__video-splash-image
height 100%
object-fit cover
object-position center
width 100%
&__control-button-previous
&__control-button-next
@extends $control-button
border solid 2px var(--borderColor)
&:focus
&:hover
background-color var(--iconBackgroundColorActive)
& ._mark
fill var(--iconFillColorActive)
& > svg
& ._mark
fill var(--iconFillColor)
&__controls
display flex
pointer-events all
+below(768px)
margin-right auto
width fit-content
&__controls-container
display flex
justify-content flex-end
pointer-events none
position relative
top -20px
&--no-title
top -2px
+above(768px)
top 53px
&--no-title
top -24px
&__control-button-previous
display block
margin-right 16px
+below(mediumDeviceBreakpoint)
margin-right 10px
& > svg
margin-right 4px
&__control-button-next
& > svg
margin-left 4px
There are no notes for this item.