Card Collection with Quote

HTML
View
Context
Info
Notes


        <div class="card-collection-with-quote" data-module="cardCollectionWithQuote">
    <div class="grid-container">
        <div class="card-collection-with-quote__grid grid-x grid-padding-x">
            <div class="cell medium-5">
                <div class="card-collection-with-quote__intro js-card-collection-with-quote-intro">
                    <span class="card-collection-with-quote__eyebrow">What fills the heart of Cilian Murphy</span>
                    <h2 class="card-collection-with-quote__title">The Music</h2>
                    <div class="card-collection-with-quote__text-content">
                        <div class="richtext ">
                            <p>Cross-device millennials snackable content phablet blogosphere leverage holistic. Top influencers integrated emerging thought leadership disrupt leading the pack shoptimization. Iterative tweens cross-device flat design crowdsource. Engagement shoptimization funnel mobile ready virality. B2C pivot The Cloud long-tail wheelhouse. ROI mission critical social influencer CRM hashtag quiet period. Content marketing top influencers CPM.</p>
                        </div>
                    </div>
                    <blockquote data-module="quote" class="quote quote--background">
                        <p class="quote__content">Go mbeidh an fórsa leat! — May the force be with you!</p>
                        <cite class="quote__author">LUCASFILM</cite>
                    </blockquote>
                </div>
            </div>
            <div class="cell medium-1"></div>
            <div class="cell medium-6 card-collection-with-quote__card-grid-cell">
                <div class="card-collection-with-quote__card-grid js-card-grid grid-x grid-margin-x">
                    <div class="card-collection-with-quote__card cell medium-6">
                        <div data-module="card" class="card-standard card-standard--editorial card-standard--editorial-video js-editorial-card js-card-standard js-card-generic   has-location has-tags" data-card-id=1234 data-longitude="53.31969" data-latitude="-7.70727">
                            <div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="53.31969" data-latitude="-7.70727">
                                <div class="location-marker__text">
                                    <span class="location-marker__text-description js-marker-description"></span>
                                    <span class="location-marker__distance js-marker-distance"></span>
                                </div>
                            </div>
                            <button class="like-button js-like-button" role="button">
                                <span class="like-button__text"></span>
                                <span class="like-button__wave"></span>
                            </button>
                            <div class="card-standard__media-atom-container">
                                <div class="rich-media-atom" data-module="richMediaAtom" data-isYouTube="false" data-isInsideTransform="true">
                                    <div class="rich-media-atom__inner js-atom-inner">
                                        <div class="rich-media-atom__image">
                                            <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-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;100&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-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;640&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-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                                                    <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                                                    <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                                </picture>
                                            </figure>
                                        </div>
                                        <div class="rich-media-atom__image-overlay js-image-overlay"></div>
                                        <div class="rich-media-atom__content">
                                            <p class="rich-media-atom__title js-title">A guide to Galway</p>
                                            <p class="rich-media-atom__subtitle js-subtitle">Georgia, Galway tour guide</p>
                                        </div>
                                        <div class="rich-media-atom__button js-button">
                                            <div class="rich-media-atom__icon rich-media-atom__icon--play"></div>
                                        </div>
                                    </div>
                                    <div class="rich-media-atom__modal js-modal">
                                        <div class="rich-media-atom__modal-inner">
                                            <a href="#" class="rich-media-atom__modal-close js-modal-close "></a>
                                            <div class="video " data-autoplay="false" data-hide-controls="false" data-loop="false" data-muted="false">
                                                <template class="js-small-video-template">
                                                    <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                                        <video controls playsinline class="video__player js-video-player">
                                                            <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
                                                            <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
                                                        </video>
                                                    </div>
                                                </template>
                                                <template class="js-medium-video-template">
                                                    <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                                        <video controls playsinline class="video__player js-video-player">
                                                            <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
                                                            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
                                                        </video>
                                                    </div>
                                                </template>
                                                <div class="js-video-container video__container"></div>
                                                <div class="hashtags" data-module="hashtags">
                                                    <ul>
                                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="card-standard__location js-location-name">Dublin</p>
                                <div class="hashtags" data-module="hashtags">
                                    <ul>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-collection-with-quote__card cell medium-6">
                        <div data-module="card" class="card-standard card-standard--editorial card-standard--editorial-video js-editorial-card js-card-standard js-card-generic   has-location has-tags" data-card-id=1234 data-longitude="53.31969" data-latitude="-7.70727">
                            <div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="53.31969" data-latitude="-7.70727">
                                <div class="location-marker__text">
                                    <span class="location-marker__text-description js-marker-description"></span>
                                    <span class="location-marker__distance js-marker-distance"></span>
                                </div>
                            </div>
                            <button class="like-button js-like-button" role="button">
                                <span class="like-button__text"></span>
                                <span class="like-button__wave"></span>
                            </button>
                            <div class="card-standard__media-atom-container">
                                <div class="rich-media-atom" data-module="richMediaAtom" data-isYouTube="false" data-isInsideTransform="true">
                                    <div class="rich-media-atom__inner js-atom-inner">
                                        <div class="rich-media-atom__image">
                                            <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-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;100&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-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;640&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-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                                                    <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                                                    <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                                </picture>
                                            </figure>
                                        </div>
                                        <div class="rich-media-atom__image-overlay js-image-overlay"></div>
                                        <div class="rich-media-atom__content">
                                            <p class="rich-media-atom__title js-title">A guide to Galway</p>
                                            <p class="rich-media-atom__subtitle js-subtitle">Georgia, Galway tour guide</p>
                                        </div>
                                        <div class="rich-media-atom__button js-button">
                                            <div class="rich-media-atom__icon rich-media-atom__icon--play"></div>
                                        </div>
                                    </div>
                                    <div class="rich-media-atom__modal js-modal">
                                        <div class="rich-media-atom__modal-inner">
                                            <a href="#" class="rich-media-atom__modal-close js-modal-close "></a>
                                            <div class="video " data-autoplay="false" data-hide-controls="false" data-loop="false" data-muted="false">
                                                <template class="js-small-video-template">
                                                    <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                                        <video controls playsinline class="video__player js-video-player">
                                                            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
                                                            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
                                                        </video>
                                                    </div>
                                                </template>
                                                <template class="js-medium-video-template">
                                                    <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                                        <video controls playsinline class="video__player js-video-player">
                                                            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
                                                        </video>
                                                    </div>
                                                </template>
                                                <div class="js-video-container video__container"></div>
                                                <div class="hashtags" data-module="hashtags">
                                                    <ul>
                                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="card-standard__location js-location-name">Dublin</p>
                                <div class="hashtags" data-module="hashtags">
                                    <ul>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-collection-with-quote__card cell medium-6">
                        <div class="card-featured card-featured--campaign js-card-generic" data-module="card">
                            <a href="#" target="_blank" rel="noopener" alt="Visit The West Coast" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text">Like</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>
                                <div class="video " data-module="video" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted="">
                                    <template class="js-small-video-template">
                                        <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                            <video playsinline autoplay muted loop class="video__player js-video-player">
                                                <source src="/media/campaign-card/GreenButtonCard.mp4" type="video/mp4" />
                                                <source src="/media/campaign-card/GreenButtonCard.mp4" type="video/mp4" />
                                            </video>
                                        </div>
                                    </template>
                                    <template class="js-medium-video-template">
                                        <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                            <video playsinline autoplay muted loop class="video__player js-video-player">
                                                <source src="/media/campaign-card/GreenButtonCard.mp4" type="video/mp4" />
                                            </video>
                                        </div>
                                    </template>
                                    <div class="js-video-container video__container"></div>
                                </div>
                                <p class="card-featured__campaign-tag js-page-type">Push The Green Button</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" onclick="window.location='#wildAtlanticWay'" role="button">#WildAtlanticWay</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="card-collection-with-quote__card cell medium-6">
                        <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">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 class="hashtags" data-module="hashtags">
                                        <ul>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        <div class="card-collection-with-quote{{#ifEquals cardsAligned 'right'}} card-collection-with-quote--right-aligned{{/ifEquals}}"
     data-module="cardCollectionWithQuote">
    <div class="grid-container">
        <div class="card-collection-with-quote__grid grid-x grid-padding-x">
            <div class="cell medium-5">
                <div class="card-collection-with-quote__intro js-card-collection-with-quote-intro">
                    {{#if eyebrow}}
                        <span class="card-collection-with-quote__eyebrow">{{this.eyebrow}}</span>
                    {{/if}}
                    <h2 class="card-collection-with-quote__title">{{this.title}}</h2>
                    {{#if richtext}}
                        <div class="card-collection-with-quote__text-content">
                            {{> @cp-text-richtext richtext}}
                        </div>
                    {{/if}}
                    {{#if quote}}
                        {{> @cp-text-quote quote}}
                    {{/if}}
                </div>
            </div>
            <div class="cell medium-1"></div>
            <div class="cell medium-6 card-collection-with-quote__card-grid-cell">
                <div class="card-collection-with-quote__card-grid js-card-grid grid-x grid-margin-x">
                    {{#each cards}}
                        <div class="card-collection-with-quote__card cell medium-6">
                            {{#ifEquals cardType "Collection"}}
                                {{> @cp-collection-card cssClasses="collection-card__item--featured"}}
                            {{/ifEquals}}
                            {{#ifNotEquals cardType "Collection"}}
                                {{> @card-standard-or-featured}}
                            {{/ifNotEquals}}
                        </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
    {{#if backgroundResponsiveImage}}
        <div class="card-collection-with-quote__background js-card-collection-with-quote-background">
            {{> @cp-medium-image backgroundResponsiveImage}}
            {{#if tags }}
                <div class="card-collection-with-quote__hashtags grid-container">
                    <div class="grid-x grid-padding-x card-collection-with-quote__hashtags-grid">
                        <div class="cell">
                            {{> @cp-hashtags tags }}
                        </div>
                    </div>
                </div>
            {{/if}}
        </div>
    {{/if}}
</div>


            {
  "cards": [
    {
      "webAppMode": true,
      "presentationMode": "video",
      "cardType": "EditorialCard",
      "cardId": 1234,
      "is360Video": false,
      "title": "A guide to Galway",
      "subtitle": "Georgia, Galway tour guide",
      "backgroundResponsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "videoUrls": [
            {
              "type": "video/webm",
              "url": "http://techslides.com/demos/sample-videos/small.webm"
            },
            {
              "type": "video/mp4",
              "url": "http://techslides.com/demos/sample-videos/small.mp4"
            }
          ],
          "mobileVideoUrls": [
            {
              "type": "video/mp4",
              "url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
            },
            {
              "type": "video/mp4",
              "url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
            }
          ],
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "location": {
        "latitude": -7.70727,
        "longitude": 53.31969
      },
      "locationName": "Dublin",
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Gardens",
            "url": "#gardens",
            "openOnClick": true,
            "tagName": "gardens"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    },
    {
      "webAppMode": true,
      "presentationMode": "video",
      "cardType": "EditorialCard",
      "cardId": 1234,
      "is360Video": false,
      "title": "A guide to Galway",
      "subtitle": "Georgia, Galway tour guide",
      "backgroundResponsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "videoUrls": [
            {
              "type": "video/mp4",
              "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
            }
          ],
          "mobileVideoUrls": [
            {
              "type": "video/mp4",
              "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
            },
            {
              "type": "video/mp4",
              "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
            }
          ],
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "location": {
        "latitude": -7.70727,
        "longitude": 53.31969
      },
      "locationName": "Dublin",
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Gardens",
            "url": "#gardens",
            "openOnClick": true,
            "tagName": "gardens"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    },
    {
      "cardType": "Campaign",
      "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"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "videoUrls": [
            {
              "type": "video/mp4",
              "url": "/media/campaign-card/GreenButtonCard.mp4"
            }
          ],
          "mobileVideoUrls": [
            {
              "type": "video/mp4",
              "url": "/media/campaign-card/GreenButtonCard.mp4"
            },
            {
              "type": "video/mp4",
              "url": "/media/campaign-card/GreenButtonCard.mp4"
            }
          ],
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "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",
            "openOnClick": true,
            "tagName": "wildAtlandticWay"
          }
        ]
      }
    },
    {
      "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": "#"
      },
      "isFeatured": true,
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Gardens",
            "url": "#gardens",
            "openOnClick": true,
            "tagName": "gardens"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    }
  ],
  "quote": {
    "content": "Go mbeidh an fórsa leat! — May the force be with you!",
    "hasBackground": true,
    "author": "LUCASFILM"
  },
  "title": "The Music",
  "eyebrow": "What fills the heart of Cilian Murphy",
  "richtext": {
    "content": "<p>Cross-device millennials snackable content phablet blogosphere leverage holistic. Top influencers integrated emerging thought leadership disrupt leading the pack shoptimization. Iterative tweens cross-device flat design crowdsource. Engagement shoptimization funnel mobile ready virality. B2C pivot The Cloud long-tail wheelhouse. ROI mission critical social influencer CRM hashtag quiet period. Content marketing top influencers CPM.</p>"
  }
}

Handle: @cp-card-collection-with-quote
Variants (2): Default , Right Aligned
Preview:
- With layout
- Component only
Filesystem Path: src/patterns/03-components/collections/cp-card-collection-with-quote.hbs
References (6): @cp-text-richtext, @cp-text-quote, @cp-collection-card, @card-standard-or-featured, @cp-medium-image, @cp-hashtags

There are no notes for this item.

Card Collection with Quote

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