<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">&gt;</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">&gt;</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.