Show Page

<article class="show show__comedy border-top border-start border-end rounded rounded-3">

    <header class="show--header d-md-flex flex-wrap">

        <div class="show--gallery">
            <div class="show--gallery-images swiper">
                <div class="swiper-wrapper">
                    <img class="show--gallery-image show--gallery-image__hero swiper-slide" src="/images/samples/show-image/macintyre-large-square.png" alt="Hero image">
                    <img class="show--gallery-image swiper-slide" src="/images/samples/show-image/macintyre-large-square.png" alt="Gallery image #1">
                    <img class="show--gallery-image swiper-slide" src="/images/samples/show-image/macintyre-large-square.png" alt="Gallery image #2">
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <mark class="lozenge lozenge--programme lozenge--programme__comedy">Comedy</mark>
        </div>

        <div class="show-performance-summary d-flex align-items-stretch">

            <div class="d-flex flex-column w-100">
                <div class="flex-grow-0 order-0 mb-lg-5 p-4 pb-0">
                    <h1 class="show-performance-summary--title text-uppercase mb-2">Michael McIntyre's Big World Tour</h1>
                    <p class="show-performance-summary--company">Fuzz Productions Ltd</p>
                </div>

                <div class="show-performance-summary--location flex-grow-1 order-2 order-md-1 border-top rounded-top rounded-3 px-4 mt-4 mt-md-0 pt-4 pt-md-0">
                    <div class="d-flex gap-4">
                        <div>
                            <p class="show-performance-summary--festival text-uppercase fw-bolder mb-0">Edinburgh</p>
                            <p class="show-performance-summary--venue">Pleasance Courtyard<br>Pleasance Two</p>
                        </div>
                        <div>
                            <p class="show-performance-summary--start-time mb-0">19:30</p>
                            <p class="show-performance-summary--duration mb-0">60 mins</p>
                            <p class="show-performance-summary--age-rating">Suitable for ages 13+</p>
                        </div>
                    </div>
                    <div>
                        <p class="show-performance-summary--price">From <span class="fw-bolder">£12.34</span></p>
                    </div>
                </div>

                <div class="show--actions text-end my-2 my-md-0 align-self-end order-1 order-md-2 px-4 pb-0 pb-md-3">
                    <a class="show--action show--action__book btn btn-primary btn-lg d-inline-flex align-items-center gap-2" data-bs-toggle="offcanvas" href="#booking-drawer">
                        Book now
                    </a>
                </div>
            </div>

        </div>

    </header>

    <div class="show--main border-top border-bottom rounded-top rounded-3 p-4">

        <p class="show--dateline border-top border-bottom border-2 border-primary fs-4 fw-bolder text-center py-2">
            Fri 08 Nov 2019 - Sun 10 Nov 2019
        </p>

        <div class="show--description border-bottom border-2 border-primary p-sm-4 pt-sm-2">
            <ul class="show-tags list-inline mb-2">
                <li class="list-inline-item mb-2"><mark class="lozenge lozenge--content">Musical</mark></li>
                <li class="list-inline-item mb-2"><mark class="lozenge lozenge--content">New Writing</mark></li>
                <li class="list-inline-item mb-2"><mark class="lozenge lozenge--content">LGBT+</mark></li>
            </ul>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At cumque neque quidem. Veritatis cum ut corrupti sit consequatur soluta laudantium facere voluptate similique? Voluptatem modi doloribus recusandae reiciendis suscipit cumque.</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At cumque neque quidem. Veritatis cum ut corrupti sit consequatur soluta laudantium facere voluptate similique? Voluptatem modi doloribus recusandae reiciendis suscipit cumque.</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At cumque neque quidem. Veritatis cum ut corrupti sit consequatur soluta laudantium facere voluptate similique? Voluptatem modi doloribus recusandae reiciendis suscipit cumque.</p>

            <aside class="warnings mt-3 p-3 border-top border-2 border-primary d-flex align-items-center">
                <div class="warnings--icon p-0 me-2 d-flex ">
                    <svg>
                        <use xlink:href="#info"></use>
                    </svg>
                </div>
                <div class="warnings--copy ms-2">
                    <p>Content warnings lorem ipsum dolor sit amet consectetur, adipisicing elit. At cumque neque quidem. Veritatis cum ut corrupti sit consequatur soluta laudantium facere voluptate similique? Voluptatem modi doloribus recusandae reiciendis suscipit cumque.</p>
                </div>
            </aside>
            <div class="border-top border-2 border-primary pt-3">
                <h3 class="h5 text-uppercase fw-bolder">Access Tickets</h3>

                <p>To book in access tickets including complimentary personal assistant tickets, wheelchair accessible seating or to arrange any additional venue assistance, (such as hearing loops, early venue access or specific seat requests), please contact the box office directly to make your booking.</p>

                <p>For more information about our venues and performance spaces, please visit our access pages <a href="https://trust.pleasance.co.uk/content/accessibility">here</a>.</p>

                <p>
                    <strong>Phone</strong>: 020 7609 1800<br>
                    <strong>Email</strong>: <a href="mailto:[email protected]">[email protected]</a> // <a href="mailto:[email protected]">[email protected]</a>
                </p>
            </div>
        </div>

        <div class="border-bottom border-2 border-primary">
            <div class="mx-auto col-md-8 my-4">
                <div class="ratio ratio-16x9 mt-3">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/IaupV4MzEDo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>
                <div class="ratio ratio-16x9 mt-3">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/IaupV4MzEDo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>
                <div class="ratio ratio-16x9 mt-3">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/IaupV4MzEDo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>
            </div>
        </div>
        <div class="reviews border-bottom border-primary border-2 py-4 d-flex align-items-stretch justify-content-between flex-wrap swiper position-relative">
            <div class="swiper-wrapper">
                <div class="review px-3 border-end swiper-slide">
                    <p class="review--rating d-flex my-0 fs-4" aria-label="Five stars">
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                    </p>
                    <p class="review--excerpt my-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br></p>
                    <p class="review--attribution my-0 fw-bolder">The Stage</p>
                </div>
                <div class="review px-3 border-end swiper-slide">
                    <p class="review--rating d-flex my-0 fs-4" aria-label="One star">
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                    </p>
                    <p class="review--excerpt my-1">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br></p>
                    <p class="review--attribution my-0 fw-bolder">The Stage</p>
                </div>
                <div class="review px-3 border-end swiper-slide">
                    <p class="review--excerpt my-1">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br></p>
                    <p class="review--attribution my-0 fw-bolder">The Stage</p>
                </div>
                <div class="review px-3 border-end swiper-slide">
                    <p class="review--rating d-flex my-0 fs-4" aria-label="Four stars">
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                        <svg>
                            <use xlink:href="#star"></use>
                        </svg>
                    </p>
                    <p class="review--excerpt my-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br></p>
                    <p class="review--attribution my-0 fw-bolder">The Stage</p>
                </div>
                <div class="review px-3 border-end swiper-slide">
                    <p class="review--excerpt my-1">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br></p>
                    <p class="review--attribution my-0 fw-bolder">The Stage</p>
                </div>
            </div>
            <span class="reviews--next swiper-button-next position-absolute align-items-center justify-content-center fs-2" aria-label="Next review slide">&gt;</span>
        </div>
        <div class="show--sponsor-list d-flex border-bottom border-primary border-2 justify-content-center gap-4 py-5 flex-wrap">
            <img class="show--sponsor" src="/images/samples/sponsor-1.png" alt="Sponsor #1">
            <img class="show--sponsor" src="/images/samples/sponsor-2.png" alt="Sponsor #2">
            <img class="show--sponsor" src="/images/samples/sponsor-3.png" alt="Sponsor #3">
        </div>
        <aside class="offer bg-primary p-3 border rounded rounded-4 mt-4 d-flex">
            <div class="d-flex offer--icon p-0 me-3">
                <svg>
                    <use xlink:href="#star"></use>
                </svg>
            </div>
            <div class="offer--copy border-start border-2 border-secondary ps-3">
                <p>Work in Progress Offer: 3 shows in the season for £12.00</p>
                <p>Group Tickets - Buy 6 tickets or more and save £5 per ticket - just enter the amount you want under this price band. Excludes preview performances.
                </p>
            </div>
        </aside>
    </div>

</article>

<div class="mt-4">
    <div class="carousel swiper position-relative">
        <h2 class="text-uppercase fw-bolder fs-3"><a href="#" class="chevron">More Pleasance</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 id="booking-drawer" class="booking-drawer offcanvas offcanvas-end">
    <div class="offcanvas-header align-items-start">
        <div class="offcanvas-title d-flex gap-3 align-items-start">
            <img src="/images/samples/show-image/macintyre-small-square.png" alt="Michael M" class="booking-drawer--header-image">
            <div>
                <h3 class="h5 fw-semibold">Michael McIntyre's Big World Tour</h3>
                <p class="lh-sm my-1">
                    <strong class="text-uppercase">Edinburgh</strong>
                </p>
                <p class="lh-sm my-1">
                    Pleasance Courtyard,<br>
                    Pleasance Two
                </p>
                <p class="lh-sm">
                    (60 mins)
                </p>
            </div>
        </div>
        <button type="button" class="btn-close btn-secondary" data-bs-dismiss="offcanvas" data-bs-target="#booking-drawer" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body pt-0">
        <form>

            <div class="booking-form--performance-list p-3 border border-2 rounded mb-3 bg-white">
                <h2 class="h5 text-center text-uppercase">Select performance</h2>
                <div>
                    <select id="radio" name="radio" class="form-select" aria-label="Select">
                        <option selected>-- Choose one --</option>
                        <option value="0" disabled>Thu, 27/11/2019 - 14:30 SOLD OUT</option>
                        <option value="1">Fri, 28/11/2019 - 14:30 SELLING FAST</option>
                        <option value="2" disabled>Sat, 29/11/2019 - 14:30 SOLD OUT</option>
                        <option value="3">Sun, 30/11/2019 - 19:30 [£12.34]</option>
                    </select>
                </div>
                <p class="d-grid gap-2 my-2">
                    <button class="my-2 btn btn-primary">Book now</button>
                </p>
            </div>

            <p>
                Once purchased, all tickets are non-exchangeable and non-refundable.<br>
                Where applicable, a booking fee is charged at £1.25 per ticket, capped at £5.
            </p>

            <p>
                <a href="#" class="text-secondary chevron"><strong>Find out why we charge booking fees</strong></a>
            </p>

            <p>Tickets are held in the basket for a limited period of time</p>

        </form>
    </div>
</div>