Cp Porthole Slide 

<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="" alt="">
        <picture class="image__container">
            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="">
        </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="" alt="">
        <picture class="image__container">
            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="">
        </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">
                <p class="porthole-slide__description"></p>
            </div>
            <div class="porthole-slide__circle cell medium-6">
                <a href="" 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="" alt="">
                            <picture class="image__container">
                                <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="">
                            </picture>
                        </figure>
                    </div>
                </a>
            </div>
            <div class="porthole-slide__media cell medium-3">
            </div>
        </div>
    </div>
</div>
 
<div class="porthole-slide__background-overlay">
    {{> @cp-medium-image responsiveImage}}
    <div class="porthole-slide__overlay"></div>
</div>
<div class="porthole-slide__background">
    {{> @cp-medium-image responsiveImage}}
</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">
                {{#if brandSimpleImage}}
                    <div class="porthole-slide__brand" >
                        {{> @cp-medium-image sources=brandSimpleImage.sources alt=brandSimpleImage.alt originalSize=true}}
                    </div>
                {{/if}}
                <p class="porthole-slide__description">{{description}}</p>
                {{> @cp-button-primary target="button.target" text=button.text url=button.url cssClasses="js-porthole-cta" modifier="with-icon"}}
            </div>
            <div class="porthole-slide__circle cell medium-6">
                <a href="{{button.url}}" class="porthole-slide__cta js-porthole-cta" role="button">
                    <div class="porthole-slide__porthole">
                        {{#if fullVideo}}
                            {{> @cp-medium-video doNotInitialise=true isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video autoplay=false hideControls=true loop=true muted=true }}
                        {{else}}
                            {{> @cp-medium-image responsiveImage}}
                        {{/if}}
                    </div>
                </a>
            </div>
            <div class="porthole-slide__media cell medium-3">
                {{#if mapSimpleImage}}
                    <div class="porthole-slide__map" >
                        {{> @cp-medium-image sources=mapSimpleImage.sources alt=mapSimpleImage.alt originalSize=true}}
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
    {{#if layeredSimpleImage}}
        <div class="porthole-slide__layered-image" >
            {{> @cp-medium-image sources=layeredSimpleImage.sources alt=layeredSimpleImage.alt originalSize=true}}
        </div>
    {{/if}}
</div>
 
/* No context defined for this component. */

There are no notes for this item.