<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=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=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=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=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=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=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="[{"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"}]" 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.