Search Page Results

<div class="mt-4">
    <h1 class="text-uppercase fs-3">Results (101)</h1>
    <p>Results for <strong>'test search phrase'</strong>:</p>
    <div class="p-4 bg-secondary rounded text-white">
        <form action="#" class="d-flex align-items-end gap-2">
            <div class="mt-2 ">
                <input type="text" class="mb-2 form-control" aria-label="Search again" id="keywords" name="keywords" value="test search phrase" size="60" maxlength="128" placeholder="enter keywords here">
            </div>
            <button class="my-2 btn btn-primary">Search</button>
        </form>
    </div>
    <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>
</div>