<div class="home">
<div class="mt-4">
<a href="#" class="call-to-action" aria-label="">
<picture class="call-to-action--image">
<source srcset="/images/samples/cta-large.jpg" media="(min-width: 768px)">
<source srcset="/images/samples/cta-medium.jpg" media="(min-width: 576px)">
<img src="/images/samples/cta-small.jpg" alt="A call-to-action image" class="img-fluid">
</picture>
</a>
</div>
<div class="mt-4">
<a href="#" class="call-to-action" aria-label="">
<picture class="call-to-action--image">
<source srcset="/images/samples/cta-large.jpg" media="(min-width: 768px)">
<source srcset="/images/samples/cta-medium.jpg" media="(min-width: 576px)">
<img src="/images/samples/cta-small.jpg" alt="A call-to-action image" class="img-fluid">
</picture>
</a>
</div>
<div class="mt-4">
<div class="carousel swiper position-relative">
<h2 class="text-uppercase fw-bolder fs-3"><a href="#" class="chevron">Show Carousel</a></h2>
<div class="carousel--items swiper-wrapper">
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__comedy border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Michael McIntyre's Big World Tour
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/half-moon-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">The Half Moon</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for The Half Moon
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__comedy border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Michael McIntyre's Big World Tour
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/santi-naz-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Santi & Naz</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>The Thelmas and The Pleasance, in association with Sarah Verghese Productions</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Santi & Naz
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__comedy border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Michael McIntyre's Big World Tour
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/henry-normal-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Edge Street Live presents Henry Normal & Nigel Planer</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Edge Street Live presents Henry Normal & Nigel Planer
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/santi-naz-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Santi & Naz</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>The Thelmas and The Pleasance, in association with Sarah Verghese Productions</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Santi & Naz
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/half-moon-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">The Half Moon</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for The Half Moon
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__comedy border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Michael McIntyre's Big World Tour
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/henry-normal-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Edge Street Live presents Henry Normal & Nigel Planer</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Edge Street Live presents Henry Normal & Nigel Planer
</a>
</article>
</div>
<span class="carousel--next swiper-button-next position-absolute align-items-center justify-content-center fs-2" aria-label="Next carousel slide">></span>
</div>
</div>
<div class="mt-4">
<a href="#" class="call-to-action" aria-label="">
<picture class="call-to-action--image">
<source srcset="/images/samples/cta-large.jpg" media="(min-width: 768px)">
<source srcset="/images/samples/cta-medium.jpg" media="(min-width: 576px)">
<img src="/images/samples/cta-small.jpg" alt="A call-to-action image" class="img-fluid">
</picture>
</a>
</div>
<div class="mt-4">
<div class="carousel swiper position-relative">
<h2 class="text-uppercase fw-bolder fs-3"><a href="#" class="chevron">CTA Carousel</a></h2>
<div class="carousel--items swiper-wrapper">
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__comedy border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Michael McIntyre's Big World Tour
</a>
</article>
<article class="listing-card listing-card__cta position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<a href="#">
<img class="w-100" src="/images/samples/custom-cta.png" alt="Example image">
</a>
</header>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/half-moon-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">The Half Moon</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for The Half Moon
</a>
</article>
<article class="listing-card listing-card__cta position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<a href="#">
<img class="w-100" src="/images/samples/custom-cta.png" alt="Example image">
</a>
</header>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/santi-naz-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Santi & Naz</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>The Thelmas and The Pleasance, in association with Sarah Verghese Productions</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Santi & Naz
</a>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__comedy border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Michael McIntyre's Big World Tour
</a>
</article>
<article class="listing-card listing-card__cta position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<a href="#">
<img class="w-100" src="/images/samples/custom-cta.png" alt="Example image">
</a>
</header>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/henry-normal-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Edge Street Live presents Henry Normal & Nigel Planer</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Edge Street Live presents Henry Normal & Nigel Planer
</a>
</article>
<article class="listing-card listing-card__cta position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<a href="#">
<img class="w-100" src="/images/samples/custom-cta.png" alt="Example image">
</a>
</header>
</article>
<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__comedy border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Michael McIntyre's Big World Tour
</a>
</article>
</div>
<span class="carousel--next swiper-button-next position-absolute align-items-center justify-content-center fs-2" aria-label="Next carousel slide">></span>
</div>
</div>
</div>
<div class="home">
<div class="mt-4">
{% render "@call-to-action" %}
</div>
<div class="mt-4">
{% render "@call-to-action" %}
</div>
<div class="mt-4">
{% render "@carousel" with { heading: "Show Carousel" } %}
</div>
<div class="mt-4">
{% render "@call-to-action" %}
</div>
<div class="mt-4">
{% render "@carousel--custom" with { heading: "CTA Carousel" } %}
</div>
</div>
{
"is_front": true,
"title": "Home"
}
No notes defined.