<div class="listing__content">
<div class="ferry-route-cards">
<div class="ferry-route-cards__group">
<hr class="spacer-lg">
<div class="grid-container spacer-xl">
<header class="grid-x spacer-md">
<div class="cell small-8 medium-10">
<div class="grid-x spacer-xxs">
<h2 class="ferry-route-cards__title">Dublin</h2>
</div>
<div class="grid-x spacer-md">
<div class="ferry-route-cards__airport">
<div class="ferry-route-cards__card-meta">Dublin Port Ferryport</div>
</div>
</div>
<hr class="ferry-route-card__separator">
</div>
<div class="cell small-4 medium-2">
<div class="ferry-route-cards__map">
<img src="/media/maps/ferry-route-map.svg" alt="Dublin Port Ferryport">
</div>
</div>
</header>
<ul class="ferry-route-cards__list">
<div class="ferry-card spacer-xs">
<div class="ferry-card__inner">
<div class="grid-x spacer-sm">
<div class="ferry-card__logo" style="background-image: url(/media/icons/ferries/irish.jpg);"></div>
<div class="ferry-card__name">Irish Ferries</div>
</div>
<div class="grid-x">
<div class="grid-x ferry-card__provider-inner">
<div class="ferry-card__origin"><span>Cherbourg</span></div>
<div class="ferry-card__duration">12h</div>
<div class="ferry-card__destination"><span>Dublin</span></div>
</div>
</div>
<div class="grid-x">
<a href="http://irishferries.com" class="button-p2 button-p2--default ferry-card__button " role="button">Search on Irish Ferries</a>
</div>
</div>
</div>
<div class="ferry-card spacer-xs">
<div class="ferry-card__inner">
<div class="grid-x spacer-sm">
<div class="ferry-card__logo" style="background-image: url(/media/icons/ferries/po.jpg);"></div>
<div class="ferry-card__name">P&O Ferries</div>
</div>
<div class="grid-x">
<div class="grid-x ferry-card__provider-inner">
<div class="ferry-card__origin"><span>Cherbourg</span></div>
<div class="ferry-card__duration">1h 34m</div>
<div class="ferry-card__destination"><span>Dover</span></div>
</div>
<div class="grid-x ferry-card__provider-inner">
<div class="ferry-card__origin"><span>Liverpool</span></div>
<div class="ferry-card__duration">2h 10m</div>
<div class="ferry-card__destination"><span>Dublin</span></div>
</div>
</div>
<div class="grid-x">
<a href="http://irishferries.com" class="button-p2 button-p2--default ferry-card__button " role="button">Search on Irish Ferries</a>
</div>
</div>
</div>
</ul>
</div>
<hr class="spacer-lg">
<div class="grid-container spacer-xl">
<header class="grid-x spacer-md">
<div class="cell small-8 medium-10">
<div class="grid-x spacer-xxs">
<h2 class="ferry-route-cards__title">Ballycastle Port</h2>
</div>
<div class="grid-x spacer-md">
<div class="ferry-route-cards__airport">
<div class="ferry-route-cards__card-meta">Ballycastle Port Ferryport</div>
</div>
</div>
<hr class="ferry-route-card__separator">
</div>
<div class="cell small-4 medium-2">
<div class="ferry-route-cards__map">
<img src="/media/maps/ferry-route-map.svg" alt="Ballycastle Port Ferryport">
</div>
</div>
</header>
<ul class="ferry-route-cards__list">
<div class="ferry-card spacer-xs">
<div class="ferry-card__inner">
<div class="grid-x spacer-sm">
<div class="ferry-card__logo" style="background-image: url(/media/icons/ferries/irish.jpg);"></div>
<div class="ferry-card__name">Irish Ferries</div>
</div>
<div class="grid-x">
<div class="grid-x ferry-card__provider-inner">
<div class="ferry-card__origin"><span>Cherbourg</span></div>
<div class="ferry-card__duration">24h</div>
<div class="ferry-card__destination"><span>Ballycastle Port</span></div>
</div>
</div>
<div class="grid-x">
<a href="http://irishferries.com" class="button-p2 button-p2--default ferry-card__button " role="button">Search on Irish Ferries</a>
</div>
</div>
</div>
<div class="ferry-card spacer-xs">
<div class="ferry-card__inner">
<div class="grid-x spacer-sm">
<div class="ferry-card__logo" style="background-image: url(/media/icons/ferries/po.jpg);"></div>
<div class="ferry-card__name">P&O Ferries</div>
</div>
<div class="grid-x">
<div class="grid-x ferry-card__provider-inner">
<div class="ferry-card__origin"><span>Cherbourg</span></div>
<div class="ferry-card__duration">1h 34m</div>
<div class="ferry-card__destination"><span>Dover</span></div>
</div>
<div class="grid-x ferry-card__provider-inner">
<div class="ferry-card__origin"><span>Liverpool</span></div>
<div class="ferry-card__duration">5h 10m</div>
<div class="ferry-card__destination"><span>Ballycastle Port</span></div>
</div>
</div>
<div class="grid-x">
<a href="http://irishferries.com" class="button-p2 button-p2--default ferry-card__button " role="button">Search on Irish Ferries</a>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
<div class="listing__content">
<div class="ferry-route-cards">
{{#if ports.length}}
<div class="ferry-route-cards__group">
{{#each ports}}
<hr class="spacer-lg">
<div class="grid-container spacer-xl">
<header class="grid-x spacer-md">
<div class="cell small-8 medium-10">
<div class="grid-x spacer-xxs">
<h2 class="ferry-route-cards__title">{{title}}</h2>
</div>
<div class="grid-x spacer-md">
<div class="ferry-route-cards__airport">
<div class="ferry-route-cards__card-meta">{{name}}</div>
</div>
</div>
<hr class="ferry-route-card__separator">
</div>
<div class="cell small-4 medium-2">
<div class="ferry-route-cards__map">
<img src="{{map}}" alt="{{name}}">
</div>
</div>
</header>
<ul class="ferry-route-cards__list">
{{#each providers}}
<div class="ferry-card spacer-xs">
<div class="ferry-card__inner">
<div class="grid-x spacer-sm">
<div class="ferry-card__logo" style="background-image: url({{logo}});"></div>
<div class="ferry-card__name">{{name}}</div>
</div>
<div class="grid-x">
{{#each routes}}
<div class="grid-x ferry-card__provider-inner">
<div class="ferry-card__origin"><span>{{origin}}</span></div>
<div class="ferry-card__duration">{{duration}}</div>
<div class="ferry-card__destination"><span>{{destination}}</span></div>
</div>
{{/each}}
</div>
{{#if button}}
<div class="grid-x">
{{> @cp-button-secondary target=button.target url=button.url text=button.text modifier="default ferry-card__button"}}
</div>
{{/if}}
</div>
</div>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{else}}
<p class="ferry-route-cards__no-results">No results were found</p>
{{/if}}
</div>
</div>
{
"ports": [
{
"title": "Dublin",
"name": "Dublin Port Ferryport",
"map": "/media/maps/ferry-route-map.svg",
"providers": [
{
"name": "Irish Ferries",
"logo": "/media/icons/ferries/irish.jpg",
"routes": [
{
"origin": "Cherbourg",
"destination": "Dublin",
"duration": "12h"
}
],
"button": {
"url": "http://irishferries.com",
"text": "Search on Irish Ferries"
}
},
{
"name": "P&O Ferries",
"logo": "/media/icons/ferries/po.jpg",
"routes": [
{
"origin": "Cherbourg",
"destination": "Dover",
"duration": "1h 34m"
},
{
"origin": "Liverpool",
"destination": "Dublin",
"duration": "2h 10m"
}
],
"button": {
"url": "http://irishferries.com",
"text": "Search on Irish Ferries"
}
}
]
},
{
"title": "Ballycastle Port",
"name": "Ballycastle Port Ferryport",
"map": "/media/maps/ferry-route-map.svg",
"providers": [
{
"name": "Irish Ferries",
"logo": "/media/icons/ferries/irish.jpg",
"routes": [
{
"origin": "Cherbourg",
"destination": "Ballycastle Port",
"duration": "24h"
}
],
"button": {
"url": "http://irishferries.com",
"text": "Search on Irish Ferries"
}
},
{
"name": "P&O Ferries",
"logo": "/media/icons/ferries/po.jpg",
"routes": [
{
"origin": "Cherbourg",
"destination": "Dover",
"duration": "1h 34m"
},
{
"origin": "Liverpool",
"destination": "Ballycastle Port",
"duration": "5h 10m"
}
],
"button": {
"url": "http://irishferries.com",
"text": "Search on Irish Ferries"
}
}
]
}
]
}
There are no notes for this item.