Porthole Tabber: With Dash Urls

HTML
View
Context
Info
Notes


        <div class="porthole-tabber" data-module="portholeTabber">
    <div class="porthole-tabber__heading">
        <div class="grid-container">
            <div class="grid-x">
                <div class="cell medium-8 medium-offset-2">
                    <h2 class="porthole-tabber__title">Experience the wonder of Ireland</h2>
                    <p class="porthole-tabber__subtitle">From breathtaking landscapes and rural idylls to buzzing urban hubs and amazing festivals, it's all waiting to be discovered.</p>
                </div>
                <div class="porthole-tabber__tabs js-tabs cell">
                    <div class="porthole-tabber__tab-pill js-tab is-active" data-type="waw">Wild Atlantic Way</div>
                    <div class="porthole-tabber__tab-pill js-tab" data-type="iae">Ireland&#x27;s Ancient East</div>
                    <div class="porthole-tabber__tab-pill js-tab" data-type="eags">Northern Ireland: Embrace a Giant Spirit</div>
                    <div class="porthole-tabber__tab-pill js-tab" data-type="dublin">Dublin</div>
                    <div class="porthole-tabber__tab-pill js-tab" data-type="belfast">Belfast</div>
                    <div class="porthole-tabber__tab-pill js-tab" data-type="galway">Galway</div>
                </div>
            </div>
        </div>
    </div>
    <div class="carousel js-porthole-carousel">
        <div class="carousel__slider">
            <div class="carousel__slide cell porthole-slide
                     porthole-slide--top-right
                    " data-filter-tab="waw">
                <div class="porthole-slide__background-overlay">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                    <div class="porthole-slide__overlay"></div>
                </div>
                <div class="porthole-slide__background">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                </div>
                <div class="porthole-slide__inner">
                    <div class="grid-container porthole-slide__grid-container">
                        <div class="porthole-slide__content grid-x grid-margin-x">
                            <div class="porthole-slide__intro cell medium-3">
                                <div class="porthole-slide__brand">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="porthole-slide__description">The journey of a lifetime awaits along 2,500km of coastal road on the Wild Atlantic Way. Pack your bags, leave the everyday behind you and get ready to embrace the best of the west.</p>
                                <a href="/components/preview/cp-experience-brand-hero--default" class="button-p1 button-p1--with-icon js-porthole-cta " role="button" target="button.target">Experience</a>
                            </div>
                            <div class="porthole-slide__circle cell medium-6">
                                <a href="/components/preview/cp-experience-brand-hero--default" class="porthole-slide__cta js-porthole-cta" role="button">
                                    <div class="porthole-slide__porthole">
                                        <div class="video" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true">
                                            <template class="js-small-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <template class="js-medium-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <div class="js-video-container video__container"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="porthole-slide__media cell medium-3">
                                <div class="porthole-slide__map">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="porthole-slide__layered-image">
                        <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                            <img class="image__lowres js-image-lazyload" data-src="" alt="">
                            <picture class="image__container">
                                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                            </picture>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="carousel__slide cell porthole-slide
                     porthole-slide--top-left
                    " data-filter-tab="iae">
                <div class="porthole-slide__background-overlay">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                    <div class="porthole-slide__overlay"></div>
                </div>
                <div class="porthole-slide__background">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                </div>
                <div class="porthole-slide__inner">
                    <div class="grid-container porthole-slide__grid-container">
                        <div class="porthole-slide__content grid-x grid-margin-x">
                            <div class="porthole-slide__intro cell medium-3">
                                <div class="porthole-slide__brand">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="porthole-slide__description">Static Hero: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.</p>
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-top-left" class="button-p1 button-p1--with-icon js-porthole-cta " role="button" target="button.target">Experience</a>
                            </div>
                            <div class="porthole-slide__circle cell medium-6">
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-top-left" class="porthole-slide__cta js-porthole-cta" role="button">
                                    <div class="porthole-slide__porthole">
                                        <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                            <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                                            <picture class="image__container">
                                                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                                <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                            </picture>
                                        </figure>
                                    </div>
                                </a>
                            </div>
                            <div class="porthole-slide__media cell medium-3">
                                <div class="porthole-slide__map">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="porthole-slide__layered-image">
                        <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                            <img class="image__lowres js-image-lazyload" data-src="" alt="">
                            <picture class="image__container">
                                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                            </picture>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="carousel__slide cell porthole-slide
                     porthole-slide--bottom-right
                    " data-filter-tab="eags">
                <div class="porthole-slide__background-overlay">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                    <div class="porthole-slide__overlay"></div>
                </div>
                <div class="porthole-slide__background">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                </div>
                <div class="porthole-slide__inner">
                    <div class="grid-container porthole-slide__grid-container">
                        <div class="porthole-slide__content grid-x grid-margin-x">
                            <div class="porthole-slide__intro cell medium-3">
                                <div class="porthole-slide__brand">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="porthole-slide__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.</p>
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-bottom-right" class="button-p1 button-p1--with-icon js-porthole-cta " role="button" target="button.target">Experience</a>
                            </div>
                            <div class="porthole-slide__circle cell medium-6">
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-bottom-right" class="porthole-slide__cta js-porthole-cta" role="button">
                                    <div class="porthole-slide__porthole">
                                        <div class="video" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true">
                                            <template class="js-small-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <template class="js-medium-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <div class="js-video-container video__container"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="porthole-slide__media cell medium-3">
                                <div class="porthole-slide__map">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="porthole-slide__layered-image">
                        <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                            <img class="image__lowres js-image-lazyload" data-src="" alt="">
                            <picture class="image__container">
                                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                            </picture>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="carousel__slide cell porthole-slide
                     porthole-slide--bottom-left
                    " data-filter-tab="dublin">
                <div class="porthole-slide__background-overlay">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                    <div class="porthole-slide__overlay"></div>
                </div>
                <div class="porthole-slide__background">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                </div>
                <div class="porthole-slide__inner">
                    <div class="grid-container porthole-slide__grid-container">
                        <div class="porthole-slide__content grid-x grid-margin-x">
                            <div class="porthole-slide__intro cell medium-3">
                                <div class="porthole-slide__brand">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="porthole-slide__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.</p>
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-bottom-left" class="button-p1 button-p1--with-icon js-porthole-cta " role="button" target="button.target">Experience</a>
                            </div>
                            <div class="porthole-slide__circle cell medium-6">
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-bottom-left" class="porthole-slide__cta js-porthole-cta" role="button">
                                    <div class="porthole-slide__porthole">
                                        <div class="video" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true">
                                            <template class="js-small-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <template class="js-medium-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <div class="js-video-container video__container"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="porthole-slide__media cell medium-3">
                                <div class="porthole-slide__map">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="porthole-slide__layered-image">
                        <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                            <img class="image__lowres js-image-lazyload" data-src="" alt="">
                            <picture class="image__container">
                                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                            </picture>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="carousel__slide cell porthole-slide
                     porthole-slide--top-center
                    " data-filter-tab="belfast">
                <div class="porthole-slide__background-overlay">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                    <div class="porthole-slide__overlay"></div>
                </div>
                <div class="porthole-slide__background">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                </div>
                <div class="porthole-slide__inner">
                    <div class="grid-container porthole-slide__grid-container">
                        <div class="porthole-slide__content grid-x grid-margin-x">
                            <div class="porthole-slide__intro cell medium-3">
                                <div class="porthole-slide__brand">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="porthole-slide__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.</p>
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-top-center" class="button-p1 button-p1--with-icon js-porthole-cta " role="button" target="button.target">Experience</a>
                            </div>
                            <div class="porthole-slide__circle cell medium-6">
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-top-center" class="porthole-slide__cta js-porthole-cta" role="button">
                                    <div class="porthole-slide__porthole">
                                        <div class="video" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true">
                                            <template class="js-small-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <template class="js-medium-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <div class="js-video-container video__container"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="porthole-slide__media cell medium-3">
                                <div class="porthole-slide__map">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="porthole-slide__layered-image">
                        <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                            <img class="image__lowres js-image-lazyload" data-src="" alt="">
                            <picture class="image__container">
                                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                            </picture>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="carousel__slide cell porthole-slide
                     porthole-slide--bottom-center" data-filter-tab="galway">
                <div class="porthole-slide__background-overlay">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                    <div class="porthole-slide__overlay"></div>
                </div>
                <div class="porthole-slide__background">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                        </picture>
                    </figure>
                </div>
                <div class="porthole-slide__inner">
                    <div class="grid-container porthole-slide__grid-container">
                        <div class="porthole-slide__content grid-x grid-margin-x">
                            <div class="porthole-slide__intro cell medium-3">
                                <div class="porthole-slide__brand">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="porthole-slide__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.</p>
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-bottom-center" class="button-p1 button-p1--with-icon js-porthole-cta " role="button" target="button.target">Experience</a>
                            </div>
                            <div class="porthole-slide__circle cell medium-6">
                                <a href="/components/preview/cp-experience-brand-hero--layered-image-bottom-center" class="porthole-slide__cta js-porthole-cta" role="button">
                                    <div class="porthole-slide__porthole">
                                        <div class="video" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true">
                                            <template class="js-small-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <template class="js-medium-video-template">
                                                <div class="js-video-container video__container" data-dash-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format&#x3D;mpd-time-csf)">
                                                    <video playsinline muted loop class="video__player js-video-player" poster="https://via.placeholder.com/1600x900.png">
                                                    </video>
                                                </div>
                                            </template>
                                            <div class="js-video-container video__container"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="porthole-slide__media cell medium-3">
                                <div class="porthole-slide__map">
                                    <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                                        <img class="image__lowres js-image-lazyload" data-src="" alt="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/experience-brands/icons/waw--color.svg" />
                                            <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                                        </picture>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="porthole-slide__layered-image">
                        <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
                            <img class="image__lowres js-image-lazyload" data-src="" alt="">
                            <picture class="image__container">
                                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg" />
                                <img class="js-image-lazyload js-fallback-image" data-src="" alt="">
                            </picture>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="carousel-timer" data-module="carouselTimer">
        <div class="carousel-timer__controls js-timer active">
            <svg class="carousel-timer__controls-circle">
                <circle r="27" cx="33" cy="33"></circle>
            </svg>
            <div class="carousel-timer__button carousel-timer__button--pause js-pause"></div>
            <div class="carousel-timer__button carousel-timer__button--play js-play disabled"></div>
        </div>
    </div>
</div>


        <div class="porthole-tabber" data-module="portholeTabber">
    <div class="porthole-tabber__heading">
        <div class="grid-container">
            <div class="grid-x">
                <div class="cell medium-8 medium-offset-2">
                    <h2 class="porthole-tabber__title">{{title}}</h2>
                    <p class="porthole-tabber__subtitle">{{{subtitle}}}</p>
                </div>
                {{#if tabs}}
                    <div class="porthole-tabber__tabs js-tabs cell">
                        {{#each tabs}}
                            <div class="porthole-tabber__tab-pill js-tab{{#if @first}} is-active{{/if}}"
                                 data-type="{{tabType}}">{{text}}</div>
                        {{/each}}
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
    <div class="carousel js-porthole-carousel">
        <div class="carousel__slider">
            {{#each slides}}
                <div class="carousel__slide cell porthole-slide
                    {{#ifEquals position "top-right"}} porthole-slide--top-right{{/ifEquals}}
                    {{#ifEquals position "top-left"}} porthole-slide--top-left{{/ifEquals}}
                    {{#ifEquals position "bottom-right"}} porthole-slide--bottom-right{{/ifEquals}}
                    {{#ifEquals position "bottom-left"}} porthole-slide--bottom-left{{/ifEquals}}
                    {{#ifEquals position "top-center"}} porthole-slide--top-center{{/ifEquals}}
                    {{#ifEquals position "bottom-center"}} porthole-slide--bottom-center{{/ifEquals}}"
                     data-filter-tab="{{filterTab}}">
                    {{> @cp-porthole-slide}}
                </div>
            {{/each}}
        </div>
    </div>
    {{> @cp-carousel-timer }}
</div>


            {
  "title": "Experience the wonder of Ireland",
  "subtitle": "From breathtaking landscapes and rural idylls to buzzing urban hubs and amazing festivals, it's all waiting to be discovered.",
  "tabs": [
    {
      "text": "Wild Atlantic Way",
      "tabType": "waw"
    },
    {
      "text": "Ireland's Ancient East",
      "tabType": "iae"
    },
    {
      "text": "Northern Ireland: Embrace a Giant Spirit",
      "tabType": "eags"
    },
    {
      "text": "Dublin",
      "tabType": "dublin"
    },
    {
      "text": "Belfast",
      "tabType": "belfast"
    },
    {
      "text": "Galway",
      "tabType": "galway"
    }
  ],
  "slides": [
    {
      "filterTab": "waw",
      "description": "The journey of a lifetime awaits along 2,500km of coastal road on the Wild Atlantic Way. Pack your bags, leave the everyday behind you and get ready to embrace the best of the west.",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "dashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "mobileDashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "brandSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ],
        "src": "/media/experience-brands/icons/waw--color.svg"
      },
      "mapSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/experience-brands/icons/waw--color.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/experience-brands/icons/waw--color.svg",
            "smallUrl": "/media/experience-brands/icons/waw--color.svg"
          }
        ],
        "src": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg"
      },
      "layeredSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
            "smallUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg"
          }
        ],
        "src": "/media/porthole-tabber/porthole_asset-layer-image_IAE.gif"
      },
      "button": {
        "url": "/components/preview/cp-experience-brand-hero--default",
        "text": "Experience"
      },
      "position": "top-right"
    },
    {
      "filterTab": "iae",
      "description": "Static Hero: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ]
      },
      "brandSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ],
        "src": "/media/experience-brands/icons/iae--color.svg"
      },
      "mapSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/experience-brands/icons/waw--color.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/experience-brands/icons/waw--color.svg",
            "smallUrl": "/media/experience-brands/icons/waw--color.svg"
          }
        ],
        "src": "/media/experience-brands/maps/iae-map.svg"
      },
      "layeredSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
            "smallUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg"
          }
        ],
        "src": "/media/porthole-tabber/porthole_asset-layer_butterfly.png"
      },
      "button": {
        "url": "/components/preview/cp-experience-brand-hero--layered-image-top-left",
        "text": "Experience"
      },
      "position": "top-left"
    },
    {
      "filterTab": "eags",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "dashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "mobileDashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "brandSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ],
        "src": "/media/experience-brands/icons/eags--color.svg"
      },
      "mapSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/experience-brands/icons/waw--color.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/experience-brands/icons/waw--color.svg",
            "smallUrl": "/media/experience-brands/icons/waw--color.svg"
          }
        ],
        "src": "/media/experience-brands/maps/eags-map.svg"
      },
      "layeredSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
            "smallUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg"
          }
        ],
        "src": "/media/porthole-tabber/porthole_asset-layer-image_IAE.gif"
      },
      "button": {
        "url": "/components/preview/cp-experience-brand-hero--layered-image-bottom-right",
        "text": "Experience"
      },
      "position": "bottom-right"
    },
    {
      "filterTab": "dublin",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "dashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "mobileDashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "brandSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ],
        "src": "/media/experience-brands/icons/dublin--color.svg"
      },
      "mapSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/experience-brands/icons/waw--color.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/experience-brands/icons/waw--color.svg",
            "smallUrl": "/media/experience-brands/icons/waw--color.svg"
          }
        ],
        "src": "/media/experience-brands/maps/dublin-map.svg"
      },
      "layeredSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
            "smallUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg"
          }
        ],
        "src": "/media/porthole-tabber/porthole_asset-layer_butterfly.png"
      },
      "button": {
        "url": "/components/preview/cp-experience-brand-hero--layered-image-bottom-left",
        "text": "Experience"
      },
      "position": "bottom-left"
    },
    {
      "filterTab": "belfast",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "dashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "mobileDashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "brandSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ],
        "src": "/media/experience-brands/icons/belfast--color.svg"
      },
      "mapSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/experience-brands/icons/waw--color.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/experience-brands/icons/waw--color.svg",
            "smallUrl": "/media/experience-brands/icons/waw--color.svg"
          }
        ],
        "src": "/media/experience-brands/maps/belfast-map.svg"
      },
      "layeredSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
            "smallUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg"
          }
        ],
        "src": "/media/porthole-tabber/porthole_asset-layer-image_IAE.gif"
      },
      "button": {
        "url": "/components/preview/cp-experience-brand-hero--layered-image-top-center",
        "text": "Experience"
      },
      "position": "top-center"
    },
    {
      "filterTab": "galway",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "dashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "mobileDashUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/b260a943-c738-462f-aaaa-95a75bf98291/Ihh-web-loop-1900-100kb-8d6abd67.ism/manifest(format=mpd-time-csf)",
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "brandSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg",
            "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg"
          }
        ],
        "src": "/media/experience-brands/icons/eags--color.svg"
      },
      "mapSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "/media/experience-brands/icons/waw--color.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "/media/experience-brands/icons/waw--color.svg",
            "smallUrl": "/media/experience-brands/icons/waw--color.svg"
          }
        ],
        "src": "/media/experience-brands/maps/eags-map.svg"
      },
      "layeredSimpleImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg",
            "smallUrl": "https://tiprod20storage.blob.core.windows.net/media/Project/Website/ExperienceBrands/Maps/af54cd2e2aaa4a6c9af5c2ccc1d1e261.svg"
          }
        ],
        "src": "/media/porthole-tabber/porthole_asset-layer-image_IAE.gif"
      },
      "button": {
        "url": "/components/preview/cp-experience-brand-hero--layered-image-bottom-center",
        "text": "Experience"
      },
      "position": "bottom-center"
    }
  ]
}

Handle: @cp-porthole-tabber--with-dash-urls
Variants (2): Default , With Dash Urls
Preview:
- With layout
- Component only
Filesystem Path: src/patterns/03-components/collections/cp-porthole-tabber.hbs
References (2): @cp-porthole-slide, @cp-carousel-timer

There are no notes for this item.

Porthole Tabber: With Dash Urls

Hero

Media

Site Furniture

Text

Quote

Card Collection

Card Collection with Quote

Card Carousel

Featured Carousel

Image Carousel

Editorial Map & Card Grid

Featured Trip Ideas Card Carousel

Hashtags

Highlight List

Icon Cards

Location Access

Offer Cards Carousel

Offset Tout Collection

Porthole Tabber

Tabbed Content

Collage Hero

404 Hero

Experience Brand

Standard

Video

Homepage

Shared Board Hero

Themed Page Hero Video

Media Collage

Video

Image

Rich Media Atom

Thematic Callout

FAB

Navigation

Featured Highlight Item

Key Information Block

Responsive Table

Quote

Richtext

Campaign Tout

Large Image Tout

Standard Tout

Geolocated Container

Travel To

Hero

Datepicker

Social Share

Immersive Weather Tabs