Card Collection With Image Background

HTML
View
Context
Info
Notes


        <div class="card-collection-with-image-background" data-module="cardCollectionWithImageBackground">
    <div class="card-collection-with-image-background__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="/media/card-collection-with-image-background/image1.png" alt="Alt Text">
            <picture class="image__container">
                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/card-collection-with-image-background/image-mobile.png" />
                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/card-collection-with-image-background/image1.png" />
                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/card-collection-with-image-background/image1.png" />
                <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
            </picture>
        </figure>
    </div>
    <div class="card-collection-with-image-background__fade"></div>
    <div class="card-collection-with-image-background__content">
        <div class="grid-container">
            <div class="card-collection-with-image-background__eyebrow">
                <div class="card-collection-with-image-background__eyebrow-title">
                    Sponsored by
                </div>
                <div class="card-collection-with-image-background__eyebrow-image">
                    <img src="/media/card-collection-with-image-background/ryanair-logo.svg" alt="sponsored by">
                </div>
            </div>
            <div class="card-collection-with-image-background__cards-wrapper">
                <div class="grid-x grid-margin-x card-collection-with-image-background__grid">
                    <div class="cell small-6 large-3 card-collection-with-image-background__cell">
                        <div data-module="card" class="card-standard js-card-standard js-card-generic    has-tags">
                            <button class="like-button js-like-button" role="button">
                                <span class="like-button__text"></span>
                                <span class="like-button__wave"></span>
                            </button>
                            <template class="js-small-image-template">
                                <div class="card-standard__small-image-container js-small-image-container">
                                    <figure class="image js-image  js-small-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="">
                                        <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="">
                                        </picture>
                                    </figure>
                                </div>
                            </template>
                            <a href="#" class="card-standard__anchor js-link">
                                <div class="card-standard__image-container js-image-container">
                                    <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="">
                                        <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="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="card-standard__page-type js-page-type"></p>
                                <div class="card-standard__inner">
                                    <div class="card-standard__details">
                                        <time class="card-standard__read-time js-readtime" datetime="">4 min read</time>
                                        <h3 class="card-standard__title js-title">Bay Coast</h3>
                                        <p class="card-standard__subtitle js-subtitle">A picturesque stretch of the Wild Atlantic Way where land and water meet.</p>
                                    </div>
                                    <p class="card-standard__location js-location-name"></p>
                                    <div class="hashtags" data-module="hashtags">
                                        <ul>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="coast" onclick="window.location='#coast'" role="button">#Coast</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 class="cell small-6 large-3 card-collection-with-image-background__cell">
                        <div data-module="card" class="card-standard js-card-standard js-card-generic    ">
                            <button class="like-button js-like-button" role="button">
                                <span class="like-button__text"></span>
                                <span class="like-button__wave"></span>
                            </button>
                            <template class="js-small-image-template">
                                <div class="card-standard__small-image-container js-small-image-container">
                                    <figure class="image js-image  js-small-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="">
                                        <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="">
                                        </picture>
                                    </figure>
                                </div>
                            </template>
                            <a href="#" class="card-standard__anchor js-link">
                                <div class="card-standard__image-container js-image-container">
                                    <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="">
                                        <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="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="card-standard__page-type js-page-type"></p>
                                <div class="card-standard__inner">
                                    <div class="card-standard__details">
                                        <time class="card-standard__read-time js-readtime" datetime="">4 min read</time>
                                        <h3 class="card-standard__title js-title">Bay Coast</h3>
                                        <p class="card-standard__subtitle js-subtitle">A picturesque stretch of the Wild Atlantic Way where land and water meet.</p>
                                    </div>
                                    <p class="card-standard__location js-location-name"></p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="cell small-6 large-3 card-collection-with-image-background__cell">
                        <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location has-tags">
                            <div class="card-standard__image-container">
                                <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-1574643156929-51fa098b0394?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="">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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="">
                                    </picture>
                                </figure>
                            </div>
                            <p class="card-standard__page-type js-page-type">Accomodation</p>
                            <div class="card-standard__inner">
                                <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                                <div class="card-standard__rating">
                                    <div class="star-rating star-rating--5-max star-rating--4-rating"></div>
                                    <p class="card-standard__rating-text">4/5</p>
                                </div>
                                <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel website</a>
                                <p class="card-standard__location js-location-name">Dublin</p>
                                <a href="#" class="card-standard__link card-standard__details-link card-standard__link--bold js-details-link">View details</a>
                                <div class="hashtags" data-module="hashtags">
                                    <ul>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="coast" onclick="window.location='#coast'" role="button">#Coast</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="cell small-6 large-3 card-collection-with-image-background__cell">
                        <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                            <div class="card-standard__image-container">
                                <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="">
                                    <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="">
                                    </picture>
                                </figure>
                            </div>
                            <p class="card-standard__page-type js-page-type">Attraction</p>
                            <div class="card-standard__inner">
                                <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                                <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Attraction">Visit attraction website</a>
                                <p class="card-standard__location js-location-name">Dublin</p>
                                <a href="#" class="card-standard__link card-standard__details-link card-standard__link--bold js-details-link">View details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        <div class="card-collection-with-image-background" data-module="cardCollectionWithImageBackground">
    <div class="card-collection-with-image-background__image">
        {{> @cp-medium-image backgroundResponsiveImage}}
    </div>
    <div class="card-collection-with-image-background__fade"></div>
    <div class="card-collection-with-image-background__content">
        <div class="grid-container">
            {{#if eyebrow}}
                <div class="card-collection-with-image-background__eyebrow">
                    <div class="card-collection-with-image-background__eyebrow-title">
                        {{eyebrow.title}}
                    </div>
                    <div class="card-collection-with-image-background__eyebrow-image">
                        <img src="{{eyebrow.simpleImage.src}}" alt="{{eyebrow.simpleImage.altText}}">
                    </div>
                </div>
            {{else}}
                <div class="card-collection-with-image-background__title">{{{title}}}</div>
            {{/if}}
            <div class="card-collection-with-image-background__cards-wrapper">
                <div class="grid-x grid-margin-x card-collection-with-image-background__grid">
                    {{#each cards}}
                        <div class="cell small-6 large-3 card-collection-with-image-background__cell">
                            {{> @cp-card-standard}}
                        </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
</div>


            {
  "backgroundResponsiveImage": {
    "altText": "Alt Text",
    "lowResolutionUrl": "/media/card-collection-with-image-background/image1.png",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "/media/card-collection-with-image-background/image1.png",
        "smallUrl": "/media/card-collection-with-image-background/image-mobile.png"
      }
    ]
  },
  "eyebrow": {
    "title": "Sponsored by",
    "simpleImage": {
      "src": "/media/card-collection-with-image-background/ryanair-logo.svg",
      "altText": "sponsored by"
    }
  },
  "title": "Great trips for golfers",
  "cards": [
    {
      "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",
      "title": "Bay Coast",
      "subtitle": "A picturesque stretch of the Wild Atlantic Way where land and water meet.",
      "timeSpan": {
        "text": "4 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      },
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Coast",
            "url": "#coast",
            "openOnClick": true,
            "tagName": "coast"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    },
    {
      "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",
      "title": "Bay Coast",
      "subtitle": "A picturesque stretch of the Wild Atlantic Way where land and water meet.",
      "timeSpan": {
        "text": "4 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 4,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      },
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Coast",
            "url": "#coast",
            "openOnClick": true,
            "tagName": "coast"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    },
    {
      "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": "#"
      }
    }
  ]
}

Handle: @cp-card-collection-with-image-background
Preview:
- With layout
- Component only
Filesystem Path: src/patterns/03-components/collections/cp-card-collection-with-image-background.hbs
References (2): @cp-medium-image, @cp-card-standard
Referenced by (2): @collections-golf, @trip-ideas-hub

There are no notes for this item.

Card Collection With Image Background

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