Location Hero

<header class="hero-location " data-module="heroLocation"> <div class="hero-like" data-module="heroLike"> <button class="hero-like__button js-module-like-button" data-card-id="1338"> Save to my board <span class="like-button js-heart"><span class="like-button__wave"></span></span> </button> <div class="hero-like__card-container js-card-container"> <div class="card-featured bg-inverted js-card-generic has-tags" data-module="card" data-card-id=1338 data-longitude="-5.95577" data-latitude="54.59623"> <a href="#" class="card-featured__anchor js-link"> <div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="-5.95577" data-latitude="54.59623"> <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> <figure class="image js-image " data-module="imagelazy" data-is-small-image="" data-force-load="true"> <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?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-1528108058346-0457fb78ab00?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-1528108058346-0457fb78ab00?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-1528108058346-0457fb78ab00?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="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?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" alt="Alt Text"> </picture> </figure> <p class="card-featured__page-type js-page-type">Accommodation</p> <div class="card-featured__overlay"> <time class="card-featured__read-time" datetime="">14 - 18 March</time> <h2 class="card-featured__title js-title">Accom example</h2> <p class="card-featured__location js-location-name">Belfast</p> <div class="hashtags" data-module="hashtags"> <ul> <li><span class="hashtags__link js-hashtag-link" data-tag-name="citybreak" role="button">#Citybreak</span></li> <li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" role="button">#Adventure</span></li> <li><span class="hashtags__link js-hashtag-link" data-tag-name="surfing" role="button">#Surfing</span></li> </ul> </div> </div> </a> </div> </div> </div> <div class="hero-location__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 class="hero-location__content grid-container"> <div class="grid-x grid-padding-x"> <div class="cell medium-offset-2 medium-8 large-offset-7 large-4"> <div class="hero-location__text-container"> <h1 class="hero-location__title">Travel to Ireland</h1> <p class="hero-location__lead">By flight or by ferry, the Island of Ireland is closer than you think. Travel directly from 69 global locations, and easily hop-on to mainland Europe.</p> <div class="route-hero"> <label class="label route-hero__label">Based on your location in</label> <input type="text" id="route-hero-from" placeholder="Your location" class="route-hero__from is-border-bottom" autocomplete="off" data-options="[{&quot;label&quot;:&quot;United Kingdom&quot;,&quot;value&quot;:&quot;UK&quot;},{&quot;label&quot;:&quot;United States&quot;,&quot;value&quot;:&quot;US&quot;},{&quot;label&quot;:&quot;France&quot;,&quot;value&quot;:&quot;FR&quot;},{&quot;label&quot;:&quot;Germany&quot;,&quot;value&quot;:&quot;GR&quot;},{&quot;label&quot;:&quot;Canada&quot;,&quot;value&quot;:&quot;CA&quot;},{&quot;label&quot;:&quot;Kenya&quot;,&quot;value&quot;:&quot;KYA&quot;},{&quot;label&quot;:&quot;China&quot;,&quot;value&quot;:&quot;CH&quot;},{&quot;label&quot;:&quot;Belgium&quot;,&quot;value&quot;:&quot;BG&quot;}]" data-geotext="Your location" data-fetch-endpoint="/data/geo-data.json" /> <div class="route-hero__list"></div> </div> </div> </div> </div> </div> <div class="hero-location__sidebar"></div> </header>
<header class="hero-location {{#if ABTesting}}a-b-testing{{/if}}" data-module="heroLocation"> {{#if likeButton}} {{> @cp-hero-like-button likeButton}} {{/if}} <div class="hero-location__map"> {{> @cp-medium-image dynamicImage=true fallbackImageUrl=image.fallbackImageUrl lowResolutionUrl=image.lowResolutionUrl sources=image.sources}} </div> {{#if ABTesting}} <div class="hero-location__fade-overlay"></div> {{/if}} <div class="hero-location__content grid-container"> <div class="grid-x grid-padding-x"> {{#if ABTesting}} <div class="cell medium-offset-6 medium-5"> <div class="hero-location__text-container"> <h1 class="hero-location__title">{{title}}</h1> {{> @cp-route-travel-hero from=searchBar.from ABTesting=ABTesting}} <p class="hero-location__lead">{{content}}</p> </div> </div> {{else}} <div class="cell medium-offset-2 medium-8 large-offset-7 large-4"> <div class="hero-location__text-container"> <h1 class="hero-location__title">{{title}}</h1> <p class="hero-location__lead">{{content}}</p> {{> @cp-route-travel-hero searchBar}} </div> </div> {{/if}} </div> </div> {{#unless ABTesting}} <div class="hero-location__sidebar"></div> {{/unless}} </header>
{ "title": "Travel to Ireland", "content": "By flight or by ferry, the Island of Ireland is closer than you think. Travel directly from 69 global locations, and easily hop-on to mainland Europe.", "searchBar": { "from": { "label": "Based on your location in", "placeholder": "Your location", "geolocateText": "Your location", "options": [ { "label": "United Kingdom", "value": "UK" }, { "label": "United States", "value": "US" }, { "label": "France", "value": "FR" }, { "label": "Germany", "value": "GR" }, { "label": "Canada", "value": "CA" }, { "label": "Kenya", "value": "KYA" }, { "label": "China", "value": "CH" }, { "label": "Belgium", "value": "BG" } ], "fetchDataEndpoint": "/data/geo-data.json" } }, "likeButton": { "buttonText": "Save to my board", "card": { "isFeatured": true, "cardType": "Generic", "responsiveImage": { "forceLoad": true, "dominantColour": "#938C7D", "altText": "Alt Text", "lowResolutionUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?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-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80", "smallUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" } ], "fallbackImageUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" }, "webAppMode": true, "likeText": "Like", "cardId": 1338, "pageType": "Accommodation", "title": "Accom example", "subtitle": "", "locationName": "Belfast", "location": { "longitude": -5.95577, "latitude": 54.59623 }, "timeSpan": { "text": "14 - 18 March" }, "starRating": { "rating": 4, "total": 5 }, "tags": { "isLarge": false, "hashtags": [ { "text": "#Citybreak", "url": "#citybreak", "tagName": "citybreak" }, { "text": "#Adventure", "url": "#adventure", "tagName": "adventure" }, { "text": "#Surfing", "url": "#surfing", "tagName": "surfing" } ] } } } }

There are no notes for this item.