Brand Cards Carousel: Featured Cards White Theme

HTML
View
Context
Info
Notes


        <div class="carousel brand-cards-carousel brand-cards-carousel--white  padding-top-xxl padding-bottom-xxl" data-module="brandCardsCarousel" data-sitecore-recommendation="" data-nba-instruction="">
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell">
                <div class="brand-cards-carousel__text-content">
                    <h2 class="brand-cards-carousel__title">More places to discover</h2>
                    <p class="brand-cards-carousel__subtitle">One amazing island. Six unique regions. Mix and match for your perfect holiday.</p>
                </div>
                <div class="carousel__slider brand-cards-carousel__slider grid-x js-brand-cards-carousel-slider">
                    <div class="carousel__slide brand-cards-carousel__slide cell spacer-md">
                        <div class="card-featured bg-inverted js-card-generic " data-module="card">
                            <a href="#" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                    <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://hctimediadev.blob.core.windows.net/hctimediadev/TestPages/PlaceHolderImages/e6ac3aff3a07489691bb6c983ba20810.jpg?w&#x3D;50" alt="Alt Text">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://hctimediadev.blob.core.windows.net/hctimediadev/TestPages/PlaceHolderImages/e6ac3aff3a07489691bb6c983ba20810.jpg?w&#x3D;639" />
                                        <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://hctimediadev.blob.core.windows.net/hctimediadev/TestPages/PlaceHolderImages/e6ac3aff3a07489691bb6c983ba20810.jpg?w&#x3D;1900" />
                                        <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://hctimediadev.blob.core.windows.net/hctimediadev/TestPages/PlaceHolderImages/e6ac3aff3a07489691bb6c983ba20810.jpg?w&#x3D;1900" />
                                        <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                    </picture>
                                </figure>
                                <p class="card-featured__page-type js-page-type">Article</p>
                                <div class="card-featured__overlay">
                                    <time class="card-featured__read-time" datetime="">4 min read</time>
                                    <h2 class="card-featured__title js-title">Gardens in Ireland have a magic edge</h2>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="carousel__slide brand-cards-carousel__slide cell spacer-md">
                        <div class="card-featured bg-inverted js-card-generic has-tags" data-module="card">
                            <a href="#" target="_blank" rel="noopener" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                    <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                        <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                    </picture>
                                </figure>
                                <p class="card-featured__page-type js-page-type"></p>
                                <div class="card-featured__overlay">
                                    <h2 class="card-featured__title js-title">Explore the Wild Atlantic Way</h2>
                                    <p class="card-featured__location js-location-name">Dublin</p>
                                    <div class="hashtags hashtags--has-background" data-module="hashtags">
                                        <ul>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="wildAtlandticWay" role="button">#WildAtlanticWay</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="carousel__slide brand-cards-carousel__slide cell spacer-md">
                        <div class="card-featured bg-inverted js-card-generic " data-module="card">
                            <a href="#" target="_blank" rel="noopener" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                    <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                        <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                    </picture>
                                </figure>
                                <p class="card-featured__page-type js-page-type">Attraction</p>
                                <div class="card-featured__overlay">
                                    <h2 class="card-featured__title js-title">Generic headline for character limits</h2>
                                    <p class="card-featured__location js-location-name">Dublin</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="carousel__slide brand-cards-carousel__slide cell spacer-md">
                        <div class="card-featured bg-inverted js-card-generic " data-module="card">
                            <a href="#" target="_blank" rel="noopener" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                    <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                        <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                    </picture>
                                </figure>
                                <p class="card-featured__page-type js-page-type">Event</p>
                                <div class="card-featured__overlay">
                                    <time class="card-featured__read-time" datetime="">14 - 18 March</time>
                                    <h2 class="card-featured__title js-title">Generic headline for character limits</h2>
                                    <p class="card-featured__location js-location-name">Dublin</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="carousel__slide brand-cards-carousel__slide cell spacer-md">
                        <div class="card-featured bg-inverted js-card-generic " data-module="card">
                            <a href="#" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                    <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                        <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                    </picture>
                                </figure>
                                <p class="card-featured__page-type js-page-type">Article</p>
                                <div class="card-featured__overlay">
                                    <time class="card-featured__read-time" datetime="">4 min read</time>
                                    <h2 class="card-featured__title js-title">Gardens in Ireland have a magic edge</h2>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="carousel__slide brand-cards-carousel__slide cell spacer-md">
                        <div class="card-featured bg-inverted js-card-generic " data-module="card">
                            <a href="#" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                    <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                        <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                    </picture>
                                </figure>
                                <p class="card-featured__page-type js-page-type">Article</p>
                                <div class="card-featured__overlay">
                                    <time class="card-featured__read-time" datetime="">4 min read</time>
                                    <h2 class="card-featured__title js-title">Tales from Irelands's crypts</h2>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="carousel__slide brand-cards-carousel__slide cell spacer-md">
                        <div class="card-featured bg-inverted js-card-generic " data-module="card">
                            <a href="#" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                    <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                        <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                    </picture>
                                </figure>
                                <p class="card-featured__page-type js-page-type">Article</p>
                                <div class="card-featured__overlay">
                                    <time class="card-featured__read-time" datetime="">1 min read</time>
                                    <h2 class="card-featured__title js-title">Clonmacnoise – The Monastic Marvel</h2>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="carousel__slide brand-cards-carousel__slide cell spacer-md">
                        <div class="card-featured bg-inverted js-card-generic " data-module="card">
                            <a href="#" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                    <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                        <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                    </picture>
                                </figure>
                                <p class="card-featured__page-type js-page-type">Article</p>
                                <div class="card-featured__overlay">
                                    <time class="card-featured__read-time" datetime="">6 min read</time>
                                    <h2 class="card-featured__title js-title">Gardens in Ireland have a magic edge</h2>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        <div class="carousel brand-cards-carousel {{#if theme}}brand-cards-carousel--{{theme}} {{else}}brand-cards-carousel--white{{/if}} {{#if paddingTop}}{{paddingTop}}{{/if}} {{#if paddingBottom}}{{paddingBottom}}{{/if}}" data-module="brandCardsCarousel" data-sitecore-recommendation="{{sitecoreRecommendation}}" data-nba-instruction="{{nbaInstruction}}" >
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell">
                <div class="brand-cards-carousel__text-content">
                    {{#if title}}<h2 class="brand-cards-carousel__title">{{{title}}}</h2>{{/if}}
                    {{#if subtitle}}<p class="brand-cards-carousel__subtitle">{{{subtitle}}}</p>{{/if}}
                </div>
                <div class="carousel__slider brand-cards-carousel__slider grid-x js-brand-cards-carousel-slider">
                    {{#each cards}}
                        <div class="carousel__slide brand-cards-carousel__slide cell spacer-md">
                            {{#if ../featured }}
                            {{> @cp-card-featured }}
                            {{else}}
                            {{> @cp-card-standard }}
                            {{/if}}
                        </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
</div>


            {
  "title": "More places to discover",
  "subtitle": "One amazing island. Six unique regions. Mix and match for your perfect holiday.",
  "theme": "white",
  "paddingBottom": "padding-bottom-xxl",
  "paddingTop": "padding-top-xxl",
  "cards": [
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://hctimediadev.blob.core.windows.net/hctimediadev/TestPages/PlaceHolderImages/e6ac3aff3a07489691bb6c983ba20810.jpg?w=50",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://hctimediadev.blob.core.windows.net/hctimediadev/TestPages/PlaceHolderImages/e6ac3aff3a07489691bb6c983ba20810.jpg?w=1900",
            "smallUrl": "https://hctimediadev.blob.core.windows.net/hctimediadev/TestPages/PlaceHolderImages/e6ac3aff3a07489691bb6c983ba20810.jpg?w=639"
          }
        ]
      },
      "cardType": "Generic",
      "pageType": "Article",
      "title": "Gardens in Ireland have a magic edge",
      "subtitle": "Vestibulum aliquet lobortis malesuada. Etiam sed eros ac ex vehicula tincidunt.",
      "timeSpan": {
        "text": "4 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "cardType": "Generic",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "campaignTag": "Push The Green Button",
      "title": "Explore the Wild Atlantic Way",
      "locationName": "Dublin",
      "link": {
        "text": "Visit The West Coast",
        "url": "#",
        "target": "_blank"
      },
      "tags": {
        "isLarge": false,
        "hasBackground": true,
        "hashtags": [
          {
            "text": "#WildAtlanticWay",
            "url": "#wildAtlanticWay",
            "tagName": "wildAtlandticWay"
          }
        ]
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Attraction",
      "title": "Generic headline for character limits",
      "locationName": "Dublin",
      "link": {
        "text": "Visit attraction website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Event",
      "title": "Generic headline for character limits",
      "locationName": "Dublin",
      "timeSpan": {
        "text": "14 - 18 March"
      },
      "link": {
        "text": "Visit event website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "Generic",
      "pageType": "Article",
      "title": "Gardens in Ireland have a magic edge",
      "subtitle": "Vestibulum aliquet lobortis malesuada. Etiam sed eros ac ex vehicula tincidunt.",
      "timeSpan": {
        "text": "4 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "Generic",
      "pageType": "Article",
      "title": "Tales from Irelands's crypts",
      "subtitle": "Vestibulum aliquet lobortis malesuada. Etiam sed eros ac ex vehicula tincidunt.",
      "timeSpan": {
        "text": "4 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "Generic",
      "pageType": "Article",
      "title": "Clonmacnoise – The Monastic Marvel",
      "subtitle": "Vestibulum aliquet lobortis malesuada. Etiam sed eros ac ex vehicula tincidunt.",
      "timeSpan": {
        "text": "1 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "Generic",
      "pageType": "Article",
      "title": "Gardens in Ireland have a magic edge",
      "subtitle": "Vestibulum aliquet lobortis malesuada. Etiam sed eros ac ex vehicula tincidunt.",
      "timeSpan": {
        "text": "6 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      }
    }
  ],
  "featured": true
}

Handle: @cp-brand-cards-carousel--featured-cards---white-theme
Variants (4): Default , Standard Cards Gray Theme , Featured Cards White Theme , Featured Cards Green Theme
Preview:
- With layout
- Component only
Filesystem Path: src/patterns/03-components/collections/cp-brand-cards-carousel.hbs
References (2): @cp-card-featured, @cp-card-standard

There are no notes for this item.

Brand Cards Carousel: Featured Cards White Theme

Hero

Media

Site Furniture

Text

Quote

Brand Cards Carousel

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

Credibility Tout

Large Image Tout

Standard Tout

Seasonal Container

Geolocated Container

Travel To

Hero

Datepicker

Social Share

Immersive Weather Tabs