<!-- Section header -->
<header class="text-center">
    <div class="row column">
        <div class="section-header">
            <h1 class="section-heading">Section heading</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipiscing elit tempus, morbi nascetur pellentesque per donec arcu hac cursus risus.</p>
        </div>
        <hr class="section-header-divider" />
    </div>
</header>
<div class="row column" data-equalizer="card-header" data-equalize-on="medium">
    <div class="flex-wrapper small-padding" data-equalizer="more-info" data-equalize-on="medium">
        <article class="single-item text-center">
            <a href="http://www.bath.ac.uk/science/postgraduate-study/">
                <header data-equalizer-watch="card-header">
                    <h1>Lorem ipsum dolor sit amet consectetur adipiscing</h1>
                </header>
            </a>
            <figure>
                <img src="https://c1.staticflickr.com/3/2894/33151763805_2cd4bd49dd_b.jpg" alt="A student carrying out an experiement">
            </figure>
            <p>Lorem ipsum dolor sit amet consectetur adipiscing elit, quis tincidunt leo sollicitudin ligula sapien malesuada, felis cursus mus aliquet volutpat fusce.</p>
        </article>
    </div>
</div>
<footer class="text-center">
    <div class="row column">
        <hr class="divider">
    </div>
</footer>
</section>
<section class="pinned-items small-padding stack-section">
    <!-- Section header with call to action -->
    <header class="text-center">
        <div class="row column">
            <div class="section-header">
                <h1 class="section-heading">Section heading</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit tempus, morbi nascetur pellentesque per donec arcu hac cursus risus.</p>
            </div>
        </div>
    </header>
    <footer class="text-center">
        <div class="row column">
            <!-- COMPONENT: Standard button -->
            <a href="#" class="button">Lorem ipsum dolor sit</a>
            <!-- End component: Standard button -->
        </div>
    </footer>
</section>
<section class="pinned-items small-padding stack-section">
    <!-- Section header -->
    <header class="text-center">
        <div class="row column">
            <div class="section-header">
                <h1 class="section-heading">Section heading</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit tempus, morbi nascetur pellentesque per donec arcu hac cursus risus.</p>
            </div>
            <hr class="section-header-divider" />
        </div>
    </header>
    <div class="row column">
        <div class="flex-wrapper small-padding">
            <!-- COMPONENT: Standard card with image -->
            <article class="card standard-card">
                <a href="http://www.bath.ac.uk/case-studies/black-holes-the-realm-of-extreme-physics">
                    <header data-equalizer-watch="card-header">
                        <h1>Standard card with image</h1>
                    </header>
                </a>
                <figure>
                    <img src="https://farm5.staticflickr.com/4430/36700476053_97181faa59_o_d.jpg" alt="A Professor of Astrophysics">
                </figure>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit scelerisque, proin torquent suscipit vivamus litora fusce curae cras.</p>
            </article>
            <!-- End component: Standard card with image -->
            <!-- COMPONENT: Standard card with image -->
            <article class="card standard-card">
                <a href="http://www.bath.ac.uk/case-studies/black-holes-the-realm-of-extreme-physics">
                    <header data-equalizer-watch="card-header">
                        <h1>Standard card with image</h1>
                    </header>
                </a>
                <figure>
                    <img src="https://farm5.staticflickr.com/4430/36700476053_97181faa59_o_d.jpg" alt="A Professor of Astrophysics">
                </figure>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit scelerisque, proin torquent suscipit vivamus litora fusce curae cras.</p>
            </article>
            <!-- End component: Standard card with image -->
        </div>
    </div>
    <div class="row column">
        <hr class="divider sub">
    </div>
    <!-- Text-only -->
    <div class="row column">
        <div class="flex-wrapper small-padding">
            <!-- COMPONENT: Standard card -->
            <article class="card standard-card">
                <a href="http://www.bath.ac.uk/case-studies/black-holes-the-realm-of-extreme-physics">
                    <header data-equalizer-watch="card-header">
                        <h1>Standard card with no image</h1>
                    </header>
                </a>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit scelerisque, proin torquent suscipit vivamus litora fusce curae cras.</p>
            </article>
            <!-- End component: Standard card -->
            <!-- COMPONENT: Standard card -->
            <article class="card standard-card">
                <a href="http://www.bath.ac.uk/case-studies/black-holes-the-realm-of-extreme-physics">
                    <header data-equalizer-watch="card-header">
                        <h1>Standard card with no image</h1>
                    </header>
                </a>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit scelerisque, proin torquent suscipit vivamus litora fusce curae cras.</p>
            </article>
            <!-- End component: Standard card -->
        </div>
    </div>