Search Results

<div class="mt-4 search-results">
    <article class="d-flex my-3 p-4 pb-1 border-top flex-column">
        <h2 class="chevron"><a href="#">An interesting information page relevant to your search terms</a></h2>
        <p>Lorem ipsum dolor sit amet <strong>consectetur</strong> adipisicing elit. Sunt sequi, neque ratione unde velit eligendi vitae, enim porro itaque, officia dignissimos nobis veritatis! Soluta, aperiam esse voluptatibus voluptates praesentium reiciendis.</p>
        <div class="d-flex justify-content-end">
            <a href="#" class="my-2 btn btn-primary">More info</a>
        </div>
    </article>
    <article class="d-flex my-3 p-4 pb-1 border-top flex-column">
        <h2 class="chevron"><a href="#">An interesting information page relevant to your search terms</a></h2>
        <p>Lorem ipsum dolor sit amet <strong>consectetur</strong> adipisicing elit. Sunt sequi, neque ratione unde velit eligendi vitae, enim porro itaque, officia dignissimos nobis veritatis! Soluta, aperiam esse voluptatibus voluptates praesentium reiciendis.</p>
        <div class="d-flex justify-content-end">
            <a href="#" class="my-2 btn btn-primary">More info</a>
        </div>
    </article>
    <article class="d-flex my-3 p-4 pb-1 border-top flex-column">
        <h2 class="chevron"><a href="#">An interesting information page relevant to your search terms</a></h2>
        <p>Lorem ipsum dolor sit amet <strong>consectetur</strong> adipisicing elit. Sunt sequi, neque ratione unde velit eligendi vitae, enim porro itaque, officia dignissimos nobis veritatis! Soluta, aperiam esse voluptatibus voluptates praesentium reiciendis.</p>
        <div class="d-flex justify-content-end">
            <a href="#" class="my-2 btn btn-primary">More info</a>
        </div>
    </article>
    <article class="d-flex my-3 p-4 pb-1 border-top flex-column">
        <h2 class="chevron"><a href="#">An interesting information page relevant to your search terms</a></h2>
        <p>Lorem ipsum dolor sit amet <strong>consectetur</strong> adipisicing elit. Sunt sequi, neque ratione unde velit eligendi vitae, enim porro itaque, officia dignissimos nobis veritatis! Soluta, aperiam esse voluptatibus voluptates praesentium reiciendis.</p>
        <div class="d-flex justify-content-end">
            <a href="#" class="my-2 btn btn-primary">More info</a>
        </div>
    </article>
    <article class="d-flex my-3 p-4 pb-1 border-top flex-column">
        <h2 class="chevron"><a href="#">An interesting information page relevant to your search terms</a></h2>
        <p>Lorem ipsum dolor sit amet <strong>consectetur</strong> adipisicing elit. Sunt sequi, neque ratione unde velit eligendi vitae, enim porro itaque, officia dignissimos nobis veritatis! Soluta, aperiam esse voluptatibus voluptates praesentium reiciendis.</p>
        <div class="d-flex justify-content-end">
            <a href="#" class="my-2 btn btn-primary">More info</a>
        </div>
    </article>
    <div class="mt-3 mb-1 border-top p-4 pb-0 border-top">
        <article class="listing-card listing-card__show search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
            <header class="listing-card--header flex-grow-0">
                <img class="img-fluid" 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 bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-sm-3 flex-grow-1">The Half Moon</h3>
                <p class="mt-1 mx-2 mx-sm-3 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</small></p>
                <p class="text-uppercase m-2 mx-sm-3 my-0">Edinburgh</p>
                <p class="text-uppercase m-2 m-sm-3 my-0">August (various)</p>
            </div>
            <a href="#" class="stretched-link" aria-label="More info"></a>
        </article>
    </div>
    <div class="mt-3 mb-1 border-top p-4 pb-0 border-top">
        <article class="listing-card listing-card__show search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
            <header class="listing-card--header flex-grow-0">
                <img class="img-fluid" 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 bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-sm-3 flex-grow-1">The Half Moon</h3>
                <p class="mt-1 mx-2 mx-sm-3 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</small></p>
                <p class="text-uppercase m-2 mx-sm-3 my-0">Edinburgh</p>
                <p class="text-uppercase m-2 m-sm-3 my-0">August (various)</p>
            </div>
            <a href="#" class="stretched-link" aria-label="More info"></a>
        </article>
    </div>
    <article class="d-flex my-3 p-4 pb-1 border-top flex-column">
        <h2 class="chevron"><a href="#">An interesting information page relevant to your search terms</a></h2>
        <p>Lorem ipsum dolor sit amet <strong>consectetur</strong> adipisicing elit. Sunt sequi, neque ratione unde velit eligendi vitae, enim porro itaque, officia dignissimos nobis veritatis! Soluta, aperiam esse voluptatibus voluptates praesentium reiciendis.</p>
        <div class="d-flex justify-content-end">
            <a href="#" class="my-2 btn btn-primary">More info</a>
        </div>
    </article>
    <article class="d-flex my-3 p-4 pb-1 border-top flex-column">
        <h2 class="chevron"><a href="#">An interesting information page relevant to your search terms</a></h2>
        <p>Lorem ipsum dolor sit amet <strong>consectetur</strong> adipisicing elit. Sunt sequi, neque ratione unde velit eligendi vitae, enim porro itaque, officia dignissimos nobis veritatis! Soluta, aperiam esse voluptatibus voluptates praesentium reiciendis.</p>
        <div class="d-flex justify-content-end">
            <a href="#" class="my-2 btn btn-primary">More info</a>
        </div>
    </article>
    <article class="d-flex my-3 p-4 pb-1 border-top flex-column">
        <h2 class="chevron"><a href="#">An interesting information page relevant to your search terms</a></h2>
        <p>Lorem ipsum dolor sit amet <strong>consectetur</strong> adipisicing elit. Sunt sequi, neque ratione unde velit eligendi vitae, enim porro itaque, officia dignissimos nobis veritatis! Soluta, aperiam esse voluptatibus voluptates praesentium reiciendis.</p>
        <div class="d-flex justify-content-end">
            <a href="#" class="my-2 btn btn-primary">More info</a>
        </div>
    </article>
</div>