Ferry Route Cards 

<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&amp;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&amp;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.