Travel To Callout 

<div class="travel-to-callout" data-module="travelToCallout" data-api-endpoint="/data/callout-geo-data.json?locationID&#x3D;{0}">
    <div class="travel-to-callout__background">
        <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
            <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/travel-to-callout/aran-islands.png" alt="Alt Text">
            <picture class="image__container">
                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/travel-to-callout/aran-islands.png" />
                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/travel-to-callout/aran-islands.png" />
                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/travel-to-callout/aran-islands.png" />
                <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="/media/travel-to-callout/aran-islands.png" alt="Alt Text">
            </picture>
        </figure>
    </div>
    <div class="travel-to-callout__heading">
        <div class="grid-container">
            <div class="grid-x grid-margin-x">
                <div class="cell">
                    <p class="travel-to-callout__eyebrow">More than just a destination</p>
                    <h2 class="travel-to-callout__title">It&#x27;s a feeling</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="travel-to-callout__content">
        <div class="callout-content js-callout-content grid-container">
            <div class="grid-x grid-margin-x">
                <div class="cell">
                    <ul class="fact-cards">
                        <template>
                            <li class="fact-card">
                                <div class="fact-card__inner">
                                    <h3 class="fact-card__title">It&#x27;s a feeling</h3>
                                    <p class="fact-card__description"></p>
                                </div>
                            </li>
                        </template>
                    </ul>
                </div>
                <div class="cell medium-7">
                    <div class="callout-content__map js-callout-map">
                        <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                            <template>
                                <figure class="image js-image   loaded" data-module="imagelazy">
                                    <img class="image__lowres js-image-lazyload" data-object-fit />
                                    <picture class="image__container"></picture>
                                </figure>
                            </template>
                            <img class="image__lowres js-image-lazyload" data-object-fit data-src="" alt="">
                            <picture class="image__container">
                                <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="">
                            </picture>
                        </figure>
                    </div>
                </div>
                <div class="cell medium-4">
                    <h3 class="callout-content__title js-callout-title"></h3>
                    <p class="callout-content__subtitle js-callout-subtitle"></p>
                    <a href="#" class="button-p3 button-p3--with-arrow  " role="button">Travel to Ireland
                        <svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="travel-to-callout" data-module="travelToCallout" data-api-endpoint="{{apiEndpoint}}">
    <div class="travel-to-callout__background">
        {{> @cp-medium-image backgroundResponsiveImage}}
    </div>
    <div class="travel-to-callout__heading">
        <div class="grid-container">
            <div class="grid-x grid-margin-x">
                <div class="cell">
                    <p class="travel-to-callout__eyebrow">{{eyebrow}}</p>
                    <h2 class="travel-to-callout__title">{{title}}</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="travel-to-callout__content">
        {{> @cp-callout-content}}
    </div>
</div>
 
{
  "apiEndpoint": "/data/callout-geo-data.json?locationID={0}",
  "eyebrow": "More than just a destination",
  "title": "It's a feeling",
  "backgroundResponsiveImage": {
    "altText": "Alt Text",
    "lowResolutionUrl": "/media/travel-to-callout/aran-islands.png",
    "fallbackImageUrl": "/media/travel-to-callout/aran-islands.png",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "/media/travel-to-callout/aran-islands.png",
        "smallUrl": "/media/travel-to-callout/aran-islands.png"
      }
    ]
  },
  "button": {
    "text": "Travel to Ireland",
    "url": "#"
  }
}

There are no notes for this item.