<div class="events-grid" data-module="eventsGrid" data-filter-api-endpoint="/components/preview/{3}--{1}?datasource={0}&count={1}&offset={2}&view={3}&startDate={4}&endDate={5}&city={6}&county={7}&months={8}&seed={9}&startitem={10}&total={11}" data-datasource="" data-load-more-view="cp-more-results--events">
<div class="events-filter filter-standard js-events-filter">
<div class="filter-standard__background">
<div class="filter-standard__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 class="filter-standard__background-fade"></div>
</div>
<div class="filter-standard__content">
<div class="grid-container">
<div class="filter-standard__main-title">
Fill your heart with Ireland
</div>
<div class="filter-standard__subtitle">
Whatever you're looking for in a vacation, Ireland has something for you. Check out our trip ideas and get inspired.
</div>
<div class="filter-standard__controls js-filter-controls">
<a href="#" class="filter-standard__toggle js-filter-standard-toggle">
<span>Show filters</span>
<span>Hide filters</span>
</a>
<div class="filter-standard__results js-total-results"></div>
<div class="filter-standard__tags-wrapper js-filter-standard-tags">
<template class="js-tag-template">
<div class="filter-standard__tag js-filter-standard-tag">
<a href='#' class="filter-standard__close-icon js-remove-filter-tag"></a>
</div>
</template>
</div>
</div>
</div>
<div class="filter-standard__wrapper js-filters-container">
<div class="grid-container">
<div class="filter-standard__container">
<div class="grid-x grid-margin-x">
<div class="cell medium-4 large-4">
<div class="filter-standard__group">
<div class="js-location-filter" data-city-param-name="city" data-county-param-name="county">
<div class="filter-standard__title">Where would you like to go?</div>
<div class="filter-standard__option active js-reset-location">
<div class="filter-standard__option-title">
All of Ireland
</div>
</div>
<div class="js-city-filter">
<div class="checkbox-list js-checkbox-list">
<div class="checkbox-list__toggle js-toggle">
City
</div>
<div class="checkbox-list__list js-list-container">
<div class="checkbox-list__item">
<label for="ArmaghCity" class="js-checkbox-item">
<input type="checkbox" id="ArmaghCity" value="ArmaghCity" data-label="Armagh">
<span>Armagh</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Belfast" class="js-checkbox-item">
<input type="checkbox" id="Belfast" value="Belfast" data-label="Belfast">
<span>Belfast</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Cork" class="js-checkbox-item">
<input type="checkbox" id="Cork" value="Cork" data-label="Cork">
<span>Cork</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Derry~Londonderry" class="js-checkbox-item">
<input type="checkbox" id="Derry~Londonderry" value="Derry~Londonderry" data-label="Derry~Londonderry">
<span>Derry~Londonderry</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Dublin" class="js-checkbox-item">
<input type="checkbox" id="Dublin" value="Dublin" data-label="Dublin">
<span>Dublin</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Galway" class="js-checkbox-item">
<input type="checkbox" id="Galway" value="Galway" data-label="Galway">
<span>Galway</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Kilkenny" class="js-checkbox-item">
<input type="checkbox" id="Kilkenny" value="Kilkenny" data-label="Kilkenny">
<span>Kilkenny</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Limerick" class="js-checkbox-item">
<input type="checkbox" id="Limerick" value="Limerick" data-label="Limerick">
<span>Limerick</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Lisburn" class="js-checkbox-item">
<input type="checkbox" id="Lisburn" value="Lisburn" data-label="Lisburn">
<span>Lisburn</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Newry" class="js-checkbox-item">
<input type="checkbox" id="Newry" value="Newry" data-label="Newry">
<span>Newry</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Waterford" class="js-checkbox-item">
<input type="checkbox" id="Waterford" value="Waterford" data-label="Waterford">
<span>Waterford</span>
</label>
</div>
</div>
</div>
</div>
<div class="js-county-filter">
<div class="checkbox-list js-checkbox-list">
<div class="checkbox-list__toggle js-toggle">
County
</div>
<div class="checkbox-list__list js-list-container">
<div class="checkbox-list__item">
<label for="Antrim" class="js-checkbox-item">
<input type="checkbox" id="Antrim" value="Antrim" data-label="Antrim">
<span>Antrim</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Armagh" class="js-checkbox-item">
<input type="checkbox" id="Armagh" value="Armagh" data-label="Armagh">
<span>Armagh</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Carlow" class="js-checkbox-item">
<input type="checkbox" id="Carlow" value="Carlow" data-label="Carlow">
<span>Carlow</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Cavan" class="js-checkbox-item">
<input type="checkbox" id="Cavan" value="Cavan" data-label="Cavan">
<span>Cavan</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Clare" class="js-checkbox-item">
<input type="checkbox" id="Clare" value="Clare" data-label="Clare">
<span>Clare</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Cork" class="js-checkbox-item">
<input type="checkbox" id="Cork" value="Cork" data-label="Cork">
<span>Cork</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Donegal" class="js-checkbox-item">
<input type="checkbox" id="Donegal" value="Donegal" data-label="Donegal">
<span>Donegal</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Down" class="js-checkbox-item">
<input type="checkbox" id="Down" value="Down" data-label="Down">
<span>Down</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Dublin" class="js-checkbox-item">
<input type="checkbox" id="Dublin" value="Dublin" data-label="Dublin">
<span>Dublin</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Fermanagh" class="js-checkbox-item">
<input type="checkbox" id="Fermanagh" value="Fermanagh" data-label="Fermanagh">
<span>Fermanagh</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Galway" class="js-checkbox-item">
<input type="checkbox" id="Galway" value="Galway" data-label="Galway">
<span>Galway</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Kerry" class="js-checkbox-item">
<input type="checkbox" id="Kerry" value="Kerry" data-label="Kerry">
<span>Kerry</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Kildare" class="js-checkbox-item">
<input type="checkbox" id="Kildare" value="Kildare" data-label="Kildare">
<span>Kildare</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Kilkenny" class="js-checkbox-item">
<input type="checkbox" id="Kilkenny" value="Kilkenny" data-label="Kilkenny">
<span>Kilkenny</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Laois" class="js-checkbox-item">
<input type="checkbox" id="Laois" value="Laois" data-label="Laois">
<span>Laois</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Leitrim" class="js-checkbox-item">
<input type="checkbox" id="Leitrim" value="Leitrim" data-label="Leitrim">
<span>Leitrim</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Limerick" class="js-checkbox-item">
<input type="checkbox" id="Limerick" value="Limerick" data-label="Limerick">
<span>Limerick</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Londonderry" class="js-checkbox-item">
<input type="checkbox" id="Londonderry" value="Londonderry" data-label="Londonderry">
<span>Londonderry</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Longford" class="js-checkbox-item">
<input type="checkbox" id="Longford" value="Longford" data-label="Longford">
<span>Longford</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Louth" class="js-checkbox-item">
<input type="checkbox" id="Louth" value="Louth" data-label="Louth">
<span>Louth</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Mayo" class="js-checkbox-item">
<input type="checkbox" id="Mayo" value="Mayo" data-label="Mayo">
<span>Mayo</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Meath" class="js-checkbox-item">
<input type="checkbox" id="Meath" value="Meath" data-label="Meath">
<span>Meath</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Monaghan" class="js-checkbox-item">
<input type="checkbox" id="Monaghan" value="Monaghan" data-label="Monaghan">
<span>Monaghan</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Offaly" class="js-checkbox-item">
<input type="checkbox" id="Offaly" value="Offaly" data-label="Offaly">
<span>Offaly</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Roscommon" class="js-checkbox-item">
<input type="checkbox" id="Roscommon" value="Roscommon" data-label="Roscommon">
<span>Roscommon</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Sligo" class="js-checkbox-item">
<input type="checkbox" id="Sligo" value="Sligo" data-label="Sligo">
<span>Sligo</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Tipperary" class="js-checkbox-item">
<input type="checkbox" id="Tipperary" value="Tipperary" data-label="Tipperary">
<span>Tipperary</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Tyrone" class="js-checkbox-item">
<input type="checkbox" id="Tyrone" value="Tyrone" data-label="Tyrone">
<span>Tyrone</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Waterford" class="js-checkbox-item">
<input type="checkbox" id="Waterford" value="Waterford" data-label="Waterford">
<span>Waterford</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Westmeath" class="js-checkbox-item">
<input type="checkbox" id="Westmeath" value="Westmeath" data-label="Westmeath">
<span>Westmeath</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Wexford" class="js-checkbox-item">
<input type="checkbox" id="Wexford" value="Wexford" data-label="Wexford">
<span>Wexford</span>
</label>
</div>
<div class="checkbox-list__item">
<label for="Wicklow" class="js-checkbox-item">
<input type="checkbox" id="Wicklow" value="Wicklow" data-label="Wicklow">
<span>Wicklow</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cell medium-4 large-4">
<div class="filter-standard__group">
<div class="js-months-filter" data-months-param-name="months">
<div class="filter-standard__title">When should we expect you?</div>
<div class="grid-x grid-margin-x">
<div class="cell medium-6 large-6">
<div class="filter-standard__option active js-filter-option" data-type="months" data-value="">
<div class="filter-standard__option-title">
Anytime
</div>
</div>
</div>
<div class="cell small-6 medium-6 large-6">
<div class="filter-standard__option js-filter-option" data-type="months" data-value="MarMay">
<div class="filter-standard__option-title js-filter-option-title">
Mar - May
</div>
</div>
</div>
<div class="cell small-6 medium-6 large-6">
<div class="filter-standard__option js-filter-option" data-type="months" data-value="SepNov">
<div class="filter-standard__option-title js-filter-option-title">
Sep - Nov
</div>
</div>
</div>
<div class="cell small-6 medium-6 large-6">
<div class="filter-standard__option js-filter-option" data-type="months" data-value="JunAug">
<div class="filter-standard__option-title js-filter-option-title">
Jun - Aug
</div>
</div>
</div>
<div class="cell small-6 medium-6 large-6">
<div class="filter-standard__option js-filter-option" data-type="months" data-value="DecFeb">
<div class="filter-standard__option-title js-filter-option-title">
Dec - Feb
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cell medium-4 large-4">
<div class="filter-standard__group">
<div class="date-filter js-date-filter" data-start-date-param-name="startDate" data-end-date-param-name="endDate">
<div class="filter-standard__title">Select a specific date</div>
<div class="date-filter__date-picker js-filter-start-datepicker">
<div class='datepicker' data-offset='0' data-max-day='25' data-max-month='10' data-max-year='2030' data-monday='Mo' data-tuesday='Tu' data-wednesday='We' data-thursday='Th' data-friday='Fr' data-saturday='Sa' data-sunday='Su' data-january='January' data-february='February' data-march='March' data-april='April' data-may='May' data-june='June' data-july='July' data-august='August' data-september='September' data-october='October' data-november='November' data-december='December' data-short-january='' data-short-february='' data-short-march='' data-short-april='' data-short-may='' data-short-june='' data-short-july='' data-short-august='' data-short-september='' data-short-october='' data-short-november='' data-short-december=''>
<label class="label" for="datepickerStart">Start date</label>
<input type="text" class="input-date" readonly max="2030-10-2030" placeholder="Add dates" id="datepickerStart" />
</div>
</div>
<div class="date-filter__date-picker js-filter-end-datepicker">
<div class='datepicker' data-offset='0' data-max-day='25' data-max-month='10' data-max-year='2030' data-monday='Mo' data-tuesday='Tu' data-wednesday='We' data-thursday='Th' data-friday='Fr' data-saturday='Sa' data-sunday='Su' data-january='January' data-february='February' data-march='March' data-april='April' data-may='May' data-june='June' data-july='July' data-august='August' data-september='September' data-october='October' data-november='November' data-december='December' data-short-january='Jan' data-short-february='Feb' data-short-march='Mar' data-short-april='Apr' data-short-may='May' data-short-june='Jun' data-short-july='Jul' data-short-august='Aug' data-short-september='Sep' data-short-october='Oct' data-short-november='Nov' data-short-december='Dec'>
<label class="label" for="datepickerEnd">End date</label>
<input type="text" class="input-date" readonly max="2030-10-2030" placeholder="Add dates" id="datepickerEnd" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="trip-ideas-grid--offset-top">
<p class="trip-ideas-grid__message trip-ideas-grid__message--error js-results-error">Error</p>
<div class="trip-ideas-grid__loader js-loader">
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="js-api-results-container" data-module="card"></div>
<div class="trip-ideas-grid__button js-load-more">
<a href="#" class="button-p2 js-load-more " role="button">Load more</a>
</div>
</div>
</div>
<div class="events-grid" data-module="eventsGrid" data-filter-api-endpoint="{{filterApiEndpoint}}"
data-datasource="{{dataSource}}" data-load-more-view="{{#if loadMoreView}}{{loadMoreView}}{{else}}_cp-more-results{{/if}}">
{{> @cp-events-filter filter}}
<div class="trip-ideas-grid--offset-top">
<p class="trip-ideas-grid__message trip-ideas-grid__message--error js-results-error">{{errorMessage}}</p>
<div class="trip-ideas-grid__loader js-loader">{{> @loader }}</div>
<div class="js-api-results-container" data-module="card"></div>
<div class="trip-ideas-grid__button js-load-more">
{{> @cp-button-secondary target=button.target url="#" text=button.text cssClasses="js-load-more"}}
</div>
</div>
</div>
{
"filter": {
"title": "Fill your heart with Ireland",
"subtitle": "Whatever you're looking for in a vacation, Ireland has something for you. Check out our trip ideas and get inspired.",
"toggleTitle": "Show filters",
"toggleActiveTitle": "Hide filters",
"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"
}
]
},
"location": {
"title": "Where would you like to go?",
"resetOptionTitle": "All of Ireland",
"city": {
"paramName": "city",
"placeholder": "City",
"options": [
{
"label": "Armagh",
"value": "ArmaghCity"
},
{
"label": "Belfast",
"value": "Belfast"
},
{
"label": "Cork",
"value": "Cork"
},
{
"label": "Derry~Londonderry",
"value": "Derry~Londonderry"
},
{
"label": "Dublin",
"value": "Dublin"
},
{
"label": "Galway",
"value": "Galway"
},
{
"label": "Kilkenny",
"value": "Kilkenny"
},
{
"label": "Limerick",
"value": "Limerick"
},
{
"label": "Lisburn",
"value": "Lisburn"
},
{
"label": "Newry",
"value": "Newry"
},
{
"label": "Waterford",
"value": "Waterford"
}
]
},
"county": {
"paramName": "county",
"placeholder": "County",
"options": [
{
"label": "Antrim",
"value": "Antrim"
},
{
"label": "Armagh",
"value": "Armagh"
},
{
"label": "Carlow",
"value": "Carlow"
},
{
"label": "Cavan",
"value": "Cavan"
},
{
"label": "Clare",
"value": "Clare"
},
{
"label": "Cork",
"value": "Cork"
},
{
"label": "Donegal",
"value": "Donegal"
},
{
"label": "Down",
"value": "Down"
},
{
"label": "Dublin",
"value": "Dublin"
},
{
"label": "Fermanagh",
"value": "Fermanagh"
},
{
"label": "Galway",
"value": "Galway"
},
{
"label": "Kerry",
"value": "Kerry"
},
{
"label": "Kildare",
"value": "Kildare"
},
{
"label": "Kilkenny",
"value": "Kilkenny"
},
{
"label": "Laois",
"value": "Laois"
},
{
"label": "Leitrim",
"value": "Leitrim"
},
{
"label": "Limerick",
"value": "Limerick"
},
{
"label": "Londonderry",
"value": "Londonderry"
},
{
"label": "Longford",
"value": "Longford"
},
{
"label": "Louth",
"value": "Louth"
},
{
"label": "Mayo",
"value": "Mayo"
},
{
"label": "Meath",
"value": "Meath"
},
{
"label": "Monaghan",
"value": "Monaghan"
},
{
"label": "Offaly",
"value": "Offaly"
},
{
"label": "Roscommon",
"value": "Roscommon"
},
{
"label": "Sligo",
"value": "Sligo"
},
{
"label": "Tipperary",
"value": "Tipperary"
},
{
"label": "Tyrone",
"value": "Tyrone"
},
{
"label": "Waterford",
"value": "Waterford"
},
{
"label": "Westmeath",
"value": "Westmeath"
},
{
"label": "Wexford",
"value": "Wexford"
},
{
"label": "Wicklow",
"value": "Wicklow"
}
]
}
},
"months": {
"paramName": "months",
"title": "When should we expect you?",
"resetOptionTitle": "Anytime",
"options": [
{
"title": "Mar - May",
"value": "MarMay"
},
{
"title": "Sep - Nov",
"value": "SepNov"
},
{
"title": "Jun - Aug",
"value": "JunAug"
},
{
"title": "Dec - Feb",
"value": "DecFeb"
}
]
},
"dates": {
"title": "Select a specific date",
"start": {
"paramName": "startDate",
"datepicker": {
"label": "Start date",
"id": "datepickerStart",
"name": "datepicker",
"value": "",
"placeholder": "Add dates",
"offset": 0,
"max": {
"year": "2030",
"month": "10",
"day": "25"
},
"days": {
"sunday": "Su",
"monday": "Mo",
"tuesday": "Tu",
"wednesday": "We",
"thursday": "Th",
"friday": "Fr",
"saturday": "Sa"
},
"months": {
"january": "January",
"february": "February",
"march": "March",
"april": "April",
"may": "May",
"june": "June",
"july": "July",
"august": "August",
"september": "September",
"october": "October",
"november": "November",
"december": "December"
}
}
},
"end": {
"paramName": "endDate",
"datepicker": {
"label": "End date",
"id": "datepickerEnd",
"name": "datepicker",
"value": "",
"placeholder": "Add dates",
"offset": 0,
"max": {
"year": "2030",
"month": "10",
"day": "25"
},
"days": {
"sunday": "Su",
"monday": "Mo",
"tuesday": "Tu",
"wednesday": "We",
"thursday": "Th",
"friday": "Fr",
"saturday": "Sa"
},
"months": {
"january": "January",
"february": "February",
"march": "March",
"april": "April",
"may": "May",
"june": "June",
"july": "July",
"august": "August",
"september": "September",
"october": "October",
"november": "November",
"december": "December"
},
"shortMonths": {
"january": "Jan",
"february": "Feb",
"march": "Mar",
"april": "Apr",
"may": "May",
"june": "Jun",
"july": "Jul",
"august": "Aug",
"september": "Sep",
"october": "Oct",
"november": "Nov",
"december": "Dec"
}
}
}
}
},
"filterApiEndpoint": "/components/preview/{3}--{1}?datasource={0}&count={1}&offset={2}&view={3}&startDate={4}&endDate={5}&city={6}&county={7}&months={8}&seed={9}&startitem={10}&total={11}",
"errorMessage": "Error",
"button": {
"text": "Load more"
},
"loadMoreView": "cp-more-results--events"
}
There are no notes for this item.