FAA Pattern Library - Network

Gallery Modal: Default 

<div class="gallery-modal gallery-modal--network" data-modal-is-open="false" data-gallery-modal>
    <div class="gallery-modal__slide-container" style="transform: translateX(0vw);" data-modal-item data-carousel-index="0">
        <button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="0">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
            </button>
        <div class="gallery-modal__slide">
            <div class="gallery-modal__media-container">
                <div class="gallery-modal__image-container">
                    <figure class="captioned-image">
                        <picture class="captioned-image__picture">
                            <source srcset="https://picsum.photos/1348/960?random=1 1600w, https://picsum.photos/1348/960?random=1 1200w, https://picsum.photos/1348/960?random=1 800w, https://picsum.photos/1348/960?random=1 400w " sizes="100vw" type="image/webp">
                            <source srcset="https://picsum.photos/1348/960?random=1 1600w, https://picsum.photos/1348/960?random=1 1200w, https://picsum.photos/1348/960?random=1 800w, https://picsum.photos/1348/960?random=1 400w " sizes="100vw" type="image/jpeg">
                            <img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1348/960?random=1" alt="alt text 1">
                        </picture>
                        <figcaption class="captioned-image__caption captioned-image__caption--">
                            Image caption changes as the user swipes through.
                        </figcaption>
                    </figure>

                </div>
            </div>
            <div class="gallery-modal__caption
                                gallery-modal__caption--light" data-modal-caption>
                Image caption changes as the user swipes through.
            </div>
        </div>
        <div class="gallery-modal__controls-container">
            <div class="gallery-modal__controls">
                <button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 5 of 5" data-modal-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 tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 2 of 5" data-modal-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>
    </div>
    <div class="gallery-modal__slide-container" style="transform: translateX(100vw);" data-modal-item data-carousel-index="1">
        <button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="1">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
            </button>
        <div class="gallery-modal__slide">
            <div class="gallery-modal__media-container">
                <div class="gallery-modal__video-container">
                    <div class="gallery-modal__video">
                        <img class="gallery-modal__video-splash-image" src="https://i.ytimg.com/vi/jVIwpjHazmg/hqdefault.jpg" alt="Caption of the video" data-modal-splash-image>
                        <iframe class="gallery-modal__video-iframe" src="" title="" data-modal-video-src="https://www.youtube.com/embed/jVIwpjHazmg?feature=oembed&autoplay=1" style="display: none;" allow="autoplay"></iframe>
                        <img class="gallery-modal__video-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1YAAAHgCAIAAAApMmt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEv0lEQVR4nO3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC+BsauAAH5v2KcAAAAAElFTkSuQmCC"
                            alt="Caption of the video">
                        <button class="gallery-modal__video-play" data-modal-video-play 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-modal__caption
                                gallery-modal__caption--light" data-modal-caption>
                Caption of the video
            </div>
        </div>
        <div class="gallery-modal__controls-container">
            <div class="gallery-modal__controls">
                <button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 1 of 5" data-modal-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 tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 3 of 5" data-modal-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>
    </div>
    <div class="gallery-modal__slide-container" style="transform: translateX(100vw);" data-modal-item data-carousel-index="2">
        <button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="2">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
            </button>
        <div class="gallery-modal__slide">
            <div class="gallery-modal__media-container">
                <div class="gallery-modal__image-container">
                    <figure class="captioned-image">
                        <picture class="captioned-image__picture">
                            <source srcset="https://picsum.photos/1348/960?random=2 1600w, https://picsum.photos/1348/960?random=2 1200w, https://picsum.photos/1348/960?random=2 800w, https://picsum.photos/1348/960?random=2 400w " sizes="100vw" type="image/webp">
                            <source srcset="https://picsum.photos/1348/960?random=2 1600w, https://picsum.photos/1348/960?random=2 1200w, https://picsum.photos/1348/960?random=2 800w, https://picsum.photos/1348/960?random=2 400w " sizes="100vw" type="image/jpeg">
                            <img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1348/960?random=2" alt="alt text 2">
                        </picture>
                        <figcaption class="captioned-image__caption captioned-image__caption--">
                            This one has a caption, too.
                        </figcaption>
                    </figure>

                </div>
            </div>
            <div class="gallery-modal__caption
                                gallery-modal__caption--light" data-modal-caption>
                This one has a caption, too.
            </div>
        </div>
        <div class="gallery-modal__controls-container">
            <div class="gallery-modal__controls">
                <button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 2 of 5" data-modal-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 tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 4 of 5" data-modal-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>
    </div>
    <div class="gallery-modal__slide-container" style="transform: translateX(100vw);" data-modal-item data-carousel-index="3">
        <button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="3">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
            </button>
        <div class="gallery-modal__slide">
            <div class="gallery-modal__media-container">
                <div class="gallery-modal__image-container">
                    <figure class="captioned-image">
                        <picture class="captioned-image__picture">
                            <source srcset="https://picsum.photos/900/1100?random=3 1600w, https://picsum.photos/900/1100?random=3 1200w, https://picsum.photos/900/1100?random=3 800w, https://picsum.photos/900/1100?random=3 400w " sizes="100vw" type="image/webp">
                            <source srcset="https://picsum.photos/900/1100?random=3 1600w, https://picsum.photos/900/1100?random=3 1200w, https://picsum.photos/900/1100?random=3 800w, https://picsum.photos/900/1100?random=3 400w " sizes="100vw" type="image/jpeg">
                            <img class="captioned-image__image" loading="lazy" src="https://picsum.photos/900/1100?random=3" alt="alt text 2">
                        </picture>
                        <figcaption class="captioned-image__caption captioned-image__caption--">
                            This one has a caption, too.
                        </figcaption>
                    </figure>

                </div>
            </div>
            <div class="gallery-modal__caption
                                gallery-modal__caption--light" data-modal-caption>
                This one has a caption, too.
            </div>
        </div>
        <div class="gallery-modal__controls-container">
            <div class="gallery-modal__controls">
                <button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 3 of 5" data-modal-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 tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 5 of 5" data-modal-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>
    </div>
    <div class="gallery-modal__slide-container" style="transform: translateX(-100vw);" data-modal-item data-carousel-index="4">
        <button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="4">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
            </button>
        <div class="gallery-modal__slide">
            <div class="gallery-modal__media-container">
                <div class="gallery-modal__image-container">
                    <figure class="captioned-image">
                        <picture class="captioned-image__picture">
                            <source srcset="https://picsum.photos/1348/960?random=4 1600w, https://picsum.photos/1348/960?random=4 1200w, https://picsum.photos/1348/960?random=4 800w, https://picsum.photos/1348/960?random=4 400w " sizes="100vw" type="image/webp">
                            <source srcset="https://picsum.photos/1348/960?random=4 1600w, https://picsum.photos/1348/960?random=4 1200w, https://picsum.photos/1348/960?random=4 800w, https://picsum.photos/1348/960?random=4 400w " sizes="100vw" type="image/jpeg">
                            <img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1348/960?random=4" alt="alt text 2">
                        </picture>
                        <figcaption class="captioned-image__caption captioned-image__caption--">
                            This one has a caption, too.
                        </figcaption>
                    </figure>

                </div>
            </div>
            <div class="gallery-modal__caption
                                gallery-modal__caption--light" data-modal-caption>
                This one has a caption, too.
            </div>
        </div>
        <div class="gallery-modal__controls-container">
            <div class="gallery-modal__controls">
                <button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 4 of 5" data-modal-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 tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 1 of 5" data-modal-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>
    </div>
</div>
 
{% import "bits/macros/imageSource.twig" as imageMacros %}

<div class="gallery-modal gallery-modal--{{ siteUnit }}" data-modal-is-open="false" data-gallery-modal>
    {% set numberOfMediaItems = component.media | length %}
    {% for item in component.media %}
        <div class="gallery-modal__slide-container"  style="transform: translateX({{ loop.last ? -100 : not loop.first ? 100 : 0 }}vw);" data-modal-item data-carousel-index="{{ loop.index0 }}">
            <button class="gallery-modal__slide-button"
                    aria-label="Close modal"
                    tabindex="0"
                    data-modal-slide-button="{{ loop.index0 }}">
                {% include 'bits/icons/shrink.twig' %}
            </button>
            <div class="gallery-modal__slide">
                <div
                    class="gallery-modal__media-container">
                    {% if item.media_type == 'Image' %}
                        <div class="gallery-modal__image-container">
                            {{ imageMacros.createAlwaysFullWidthNoCrop(item.media) }}
                        </div>
                    {% else %}
                        <div class="gallery-modal__video-container">
                            <div class="gallery-modal__video">
                                <img class="gallery-modal__video-splash-image" src="{{ item.media.thumbnail_url }}" alt="{{ item.media.caption | escape }}" data-modal-splash-image>
                                <iframe class="gallery-modal__video-iframe" src="" title="{{ item.media.iframeTitle }}" data-modal-video-src="{{ item.media.src }}" style="display: none;" allow="autoplay"></iframe>
                                <img class="gallery-modal__video-placeholder" src="{{ item.media.dimensionSizingImage }}" alt="{{ item.media.caption | escape }}">
                                <button class="gallery-modal__video-play" data-modal-video-play aria-label="play video">
                                    {% include 'bits/icons/play-button/play-button.twig' %}
                                </button>
                            </div>
                        </div>
                    {% endif %}
                </div>
                <div class="gallery-modal__caption
                                gallery-modal__caption--{{ background }}"
                     data-modal-caption>
                    {{ item.media.caption | raw }}
                </div>
            </div>
            <div class="gallery-modal__controls-container">
                <div class="gallery-modal__controls">
                    {% if (loop.index - 1) <= 0 %}
                        {% set previousItemNumber = numberOfMediaItems %}
                    {% else %}
                        {% set previousItemNumber = loop.index - 1 %}
                    {% endif %}
                    {% if (loop.index + 1) > numberOfMediaItems %}
                        {% set nextItemNumber = 1 %}
                    {% else %}
                        {% set nextItemNumber = loop.index + 1 %}
                    {% endif %}
                    <button
                        tabindex="0"
                        class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item {{ previousItemNumber }} of {{ numberOfMediaItems }}" data-modal-controls-prev>
                        {% include "bits/icons/left-chevron.twig" %}
                    </button>
                    <button
                        tabindex="0"
                        class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item {{ nextItemNumber }} of {{ numberOfMediaItems }}" data-modal-controls-next>
                        {% include "bits/icons/right-chevron.twig" %}
                    </button>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
 
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light",
  "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": "#"
    }
  }
}
  • Content: 
    .gallery-modal
    align-items center
    background-color rgba(54, 61, 68, 0.75)
    display flex
    height 100vh
    justify-content center
    left 0
    overflow hidden
    position fixed
    top 0
    width 100%
    transition all 200ms ease-in-out
    z-index 3
    &[data-modal-is-open="false"]
        visibility hidden
        opacity 0
    &[data-modal-is-open="true"]
        visibility visible
        opacity 1

    --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

    &--music
        --borderColor illiniOrange
        --captionColor greyDarkest
        --iconFillColor illiniOrange
        --iconFillColorActive illiniBlue
        --iconBackgroundColorActive illiniOrange

    &__video-play
        @extends $video-play

    &__caption
        @extends $detail
        border-top 2px solid var(--borderColor)
        color var(--captionColor)
        margin-top 24px
        padding-top 8px

    &__caption
        min-height 35px

    &__container
        position relative

    &__slide-container
        transition all 200ms ease-in-out
        position fixed
        background cloud
        padding-bottom 38px
        width fit-content
        z-index 2
        &:not(:first-child)
            opacity 0

    &__media-container
        & .captioned-image__caption
            display none
        & .captioned-image__image
        & .captioned-image__gallery-image
        & iframe
            max-height 70vh
            height auto
            max-width 85vw
            width auto
            +below(1000px)
                max-width 100vw
        & iframe
            height 100%
            width 100%
            max-height 100%
            position absolute
            top 0
            left 0
            +below(mediumDeviceBreakpoint)
                height 30vh
                width 100vw

    &__image-container
    &__video-container
    &__video
        height 100%

    &__video-splash-image
        height 100%
        object-fit cover
        object-position center
        width 100%
        position absolute
        top 0
        left 0

    &__video
        position relative
        +below(1000px)
            max-width: 100vw;

    &__slide-button
        background-color rgba(0, 0, 0, 0.25)
        border-radius 50%
        cursor pointer
        height 48px
        position absolute
        right 16px
        top 16px
        width 48px
        z-index 1
        +below(mediumDeviceBreakpoint)
            height 40px
            width 40px
            right 8px
            top 8px
        & svg
            pointer-events none
            +below(mediumDeviceBreakpoint)
                height 12px
                width 12px

    &__caption
        margin 24px 160px 0 24px
        +below(1000px)
            margin 24px 24px 0 24px
            padding-bottom 8px

    &__controls-container
        position absolute
        right 24px
        bottom 24px
        margin-left 0
        +below(800px)
            bottom 32px
        +below(1000px)
            position relative
            margin-left 24px
            bottom 0
            right 0

    &__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)

    &__control-button-previous
        margin-right 12px

    &__controls
        display flex
        pointer-events all

        +below(768px)
            margin-left auto
            margin-right auto
            margin-bottom -20px
            width fit-content
  • URL: /components/raw/gallery-modal/gallery-modal.styl
  • Filesystem Path: components/partials/gallery-modal/gallery-modal.styl
  • Size: 5.4 KB

There are no notes for this item.