Info Page

<div class="info-page">

    <div class="mb-4">
        <img src="/images/samples/cta-large.jpg" alt="Full width image" class="img-fluid">
    </div>

    <h1 class="text-uppercase">This is a sample page</h1>

    <div class="mt-4">
        <div class="alert alert-warning d-flex align-items-center" role="alert">
            <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:">
                <use xlink:href="#exclamation-triangle-fill" />
            </svg>
            <div>
                <p>
                    An example alert.
                </p>

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

    <div class="mt-4">
        <img src="/images/samples/shutterstock_698118112.jpg" alt="Full width image" class="img-fluid">
    </div>

    <div class="mt-4">
        <p>Turpis fusce natoque eget. In consequat lectus parturient congue fusce dis ultrices primis. Dignissim enim diam vel laoreet. Vulputate, maecenas sem sed. Eros posuere etiam natoque habitasse turpis torquent mi curabitur vitae viverra. Consequat rhoncus volutpat volutpat fusce auctor. Sagittis pharetra tempus consequat ac blandit, cum varius bibendum odio commodo quis. Lobortis quam montes duis varius posuere nec pharetra facilisi purus. Elementum elit pulvinar, tristique primis et nam egestas tortor fusce velit! Himenaeos id dapibus primis. Malesuada nullam eros semper sapien.</p>
        <h2>Mi per hac hendrerit torquent facilisis placerat tempor inceptos posuere. </h2>
        <p><strong></strong>Magna aliquet eget dictum himenaeos</strong> pharetra tortor. Morbi integer euismod arcu. Aptent consectetur risus duis taciti. Cursus netus consequat felis cubilia, magna semper elit nisi sapien penatibus odio. Conubia eros fusce sollicitudin dignissim tempus pharetra duis scelerisque adipiscing dis? Laoreet sem sociis arcu bibendum phasellus! Nibh, tristique lobortis sollicitudin est bibendum vivamus purus. Amet scelerisque ultricies pharetra suscipit nulla platea dapibus. Sed est habitant aliquet penatibus. Dui imperdiet nisi posuere etiam. Maecenas leo dictumst, vestibulum lobortis. Cubilia pharetra turpis sem, lectus mus natoque risus potenti. Accumsan suscipit phasellus.</p>
        <p>Dictumst aenean mus tempor class nec fusce habitant amet dui cum libero. Nunc sodales senectus laoreet ullamcorper lorem netus ridiculus semper. Felis nibh lorem tristique metus himenaeos mus sagittis. Feugiat fames; nostra magna sociosqu ullamcorper eros dis semper dictumst. Habitant potenti sociis quam viverra gravida, iaculis nibh curae;. Convallis conubia fermentum habitant. Lobortis etiam nam condimentum turpis inceptos ligula. Risus augue rhoncus, praesent imperdiet augue massa class cursus molestie convallis. Parturient massa magna nisi integer taciti a id, et?</p>
        <ul>
            <li>Id massa egestas; luctus praesent feugiat habitant sit cursus mi!</li>
            <li>Enim arcu viverra vivamus semper ultrices tempor nam vehicula auctor.</li>
            <li>Conubia sem laoreet erat porta ipsum hac parturient vehicula tincidunt.</li>
        </ul>
        <ol>
            <li>Ac fringilla adipiscing netus aliquam venenatis sed volutpat habitasse erat.</li>
            <li>Est magna sollicitudin lobortis rhoncus nostra consectetur suscipit tempus ipsum?</li>
        </ol>
        <h3>Porta himenaeos molestie faucibus id lectus</h3>
        <p><em>Dui imperdiet parturient dolor</em>. Nunc porttitor eros dapibus praesent aenean. Arcu congue porttitor massa proin morbi natoque ac fusce aptent cum pretium. Pretium nullam eros et ipsum id praesent habitasse dapibus ultricies? Nunc varius sagittis curae; felis eget velit erat. Sem consequat dapibus sociosqu mus sapien mollis quam lectus montes. Rhoncus, platea luctus nam per parturient condimentum donec. Arcu sociis nunc cursus semper neque gravida convallis arcu. Felis aliquam sed felis vivamus eros sociosqu congue.</p>
        <h3>Vehicula fermentum non nulla blandit.</h3>
        <p>Ligula mollis dictum aptent! Blandit taciti sem ullamcorper hendrerit natoque turpis vitae viverra torquent nisl malesuada. Tempor massa euismod porttitor! Odio eros eget urna adipiscing. Vestibulum, eleifend congue nam nisl id felis hendrerit. Porta vulputate vestibulum pellentesque erat commodo odio rhoncus fringilla semper cubilia aenean.</p>
    </div>

    <div class="mt-4">
        <div>
            <form>
                <div class="border-5 border border-primary rounded p-4">
                    <div class="d-flex align-items-center gap-2">
                        <div id="via_cart_donation_amount_wrapper">
                            <div class="js-form-item form-item js-form-type-number form-item-amount js-form-item-amount d-flex align-items-center gap-2">
                                <label for="amount" class="form-label m-0 fs-4">
                                    <span class="visually-hidden">Amount</span> £
                                </label>
                                <input aria-describedby="amount-description" type="number" id="amount" name="amount" value="10" step="1" min="0" class="form-number form-control form-control__small">
                                <div id="amount-description" class="m-0 description visually-hidden">
                                    Please enter an amount in pounds.
                                </div>
                            </div>
                        </div>
                        <input data-drupal-selector="edit-submit" type="submit" id="submit" name="submit" value="Donate" class="button js-form-submit form-submit m-0 btn btn-primary">
                    </div>
                    <p class="mt-2 mb-0">Thank you for your donation!</p>
                </div>
            </form>
        </div>
    </div>

    <div class="mt-4">
        <div class="accordion accordion-flush">

            <div class="accordion-item">
                <h2 class="accordion-header" id="flush-headingOne">
                    <button class="accordion-button text-uppercase collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                        Accordion Item #1
                    </button>
                </h2>
                <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne">
                    <div class="accordion-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="flush-headingTwo">
                    <button class="accordion-button text-uppercase collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                        Accordion Item #2
                    </button>
                </h2>
                <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo">
                    <div class="accordion-body">
                        <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <ul>
                            <li>Ut enim ad minim veniam</li>
                            <li>quis nostrud exercitation ullamco</li>
                            <li>laboris nisi ut aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
                        </ul>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="flush-headingThree">
                    <button class="accordion-button text-uppercase collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                        Accordion Item #3
                    </button>
                </h2>
                <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree">
                    <div class="accordion-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <ol>
                            <li>Ut enim ad minim veniam</li>
                            <li>quis nostrud exercitation ullamco</li>
                            <li>laboris nisi ut aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
                        </ol>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="mt-4">
        <h3>Files to download</h3>
        <div class="border border-primary border-4 list-group list-group-flush">
            <a href="#" class="file-list-item p-2 list-group-item list-group-item-action stretched-link d-flex gap-2 align-items-center justify-content-between">
                <div class="file-list-item--link d-flex align-items-center gap-2">
                    <svg class="flex-shrink-0">
                        <use xlink:href="#file-earmark"></use>
                    </svg>
                    <div>
                        <span>A downloadable file</span>
                        <span>(123.45MB)</span>
                    </div>
                </div>
                <div class="file-list-item--download flex-shrink-0">
                    <svg>
                        <use xlink:href="#download"></use>
                    </svg>
                </div>
            </a> <a href="#" class="file-list-item p-2 list-group-item list-group-item-action stretched-link d-flex gap-2 align-items-center justify-content-between">
                <div class="file-list-item--link d-flex align-items-center gap-2">
                    <svg class="flex-shrink-0">
                        <use xlink:href="#file-earmark"></use>
                    </svg>
                    <div>
                        <span>Another downloadable file</span>
                        <span>(67.89MB)</span>
                    </div>
                </div>
                <div class="file-list-item--download flex-shrink-0">
                    <svg>
                        <use xlink:href="#download"></use>
                    </svg>
                </div>
            </a> <a href="#" class="file-list-item p-2 list-group-item list-group-item-action stretched-link d-flex gap-2 align-items-center justify-content-between">
                <div class="file-list-item--link d-flex align-items-center gap-2">
                    <svg class="flex-shrink-0">
                        <use xlink:href="#file-earmark"></use>
                    </svg>
                    <div>
                        <span>A downloadable file we don't know the size of</span>
                    </div>
                </div>
                <div class="file-list-item--download flex-shrink-0">
                    <svg>
                        <use xlink:href="#download"></use>
                    </svg>
                </div>
            </a>
        </div>
    </div>

</div>