Masonry: Default

<ul class="grid    gutter  gutter--large    masonry  masonry--loading">

    <li class="grid__item    gutter__item    masonry__item    u-width-1-of-1  u-width-1-of-2-from-large">

        <div class="resource-tile">

            <h2 class="resource-tile__title">Maecenas facilisis convallis urna</h2>

            <div class="resource-tile__description  u-font-body-copy-small">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum, purus ut laoreet pulvinar, orci eros fermentum augue, ac mattis libero metus at nisi. Nunc eget pharetra lectus, eget tempor diam. Mauris tempus risus leo, eget
                    blandit felis eleifend non. Sed est est, scelerisque et eleifend sed, egestas hendrerit augue.</p>

                <p>Proin diam ligula, dictum at sapien quis, luctus sagittis eros. Donec nec semper lacus, egestas congue nisi. Aliquam et ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ut
                    convallis tortor, sed placerat ipsum. Proin nunc lectus, convallis vitae magna vel, tempor vehicula libero. Integer viverra tristique finibus. In pulvinar orci odio, ac convallis leo tincidunt id. Orci varius natoque penatibus
                    et magnis dis parturient montes, nascetur ridiculus mus.</p>

            </div>

            <a class="button" href="#link-to-resource">Pulvinar orci</a>

        </div>

    <!-- /li -->

    <li class="grid__item    gutter__item    masonry__item    u-width-1-of-1  u-width-1-of-2-from-large">

        <div class="resource-tile">

            <h2 class="resource-tile__title">How is data kept safe?</h2>

            <div class="resource-tile__description  u-font-body-copy-small">

                <p>Patient information is sensitive and confidential. We will only be able to realise the huge potential and value of patient data in the NHS if both the public and clinicians can trust the system, and have confidence that data is appropriately
                    collected and managed</p>

            </div>

            <a class="button" href="#link-to-resource">Report on safeguards</a>

        </div>

    <!-- /li -->

    <li class="grid__item    gutter__item    masonry__item    u-width-1-of-1  u-width-1-of-2-from-large">

        <div class="resource-tile">

            <h2 class="resource-tile__title">Report on safeguards</h2>

            <div class="resource-tile__description  u-font-body-copy-small">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum, purus ut laoreet pulvinar, orci eros fermentum augue, ac mattis libero metus at nisi. Nunc eget pharetra lectus, eget tempor diam. Mauris tempus risus leo, eget
                    blandit felis eleifend non. Sed est est, scelerisque et eleifend sed, egestas hendrerit augue.</p>

            </div>

            <a class="button" href="#link-to-resource">Case studies</a>

        </div>

    <!-- /li -->

    <li class="grid__item    gutter__item    masonry__item    u-width-1-of-1  u-width-1-of-2-from-large">

        <div class="resource-tile">

            <h2 class="resource-tile__title">Nam faucibus blandit augue eget</h2>

            <div class="resource-tile__description  u-font-body-copy-small">

                <p>Maecenas rhoncus nisl sit amet nunc mollis molestie. Donec molestie ligula leo, sed semper leo vestibulum pretium. Mauris vehicula et diam sed laoreet. Nam faucibus blandit augue eget pellentesque. Etiam ligula massa, varius ut scelerisque
                    vitae, congue at nunc.</p>

            </div>

            <a class="button" href="#link-to-resource">Mauris vehicula</a>

        </div>

    <!-- /li -->

    <li class="grid__item    gutter__item    masonry__item    u-width-1-of-1  u-width-1-of-2-from-large">

        <div class="resource-tile">

            <h2 class="resource-tile__title">Volutpat accumsan, odio nulla vulputate massa</h2>

            <div class="resource-tile__description  u-font-body-copy-small">

                <p>Fusce lobortis sit amet eros in posuere. Morbi quis metus vehicula, rutrum neque in, tincidunt elit. Nulla convallis lacinia nisl quis consectetur. Phasellus dolor diam, ultrices a cursus vitae, maximus mattis eros. Etiam scelerisque,
                    eros eu volutpat accumsan, odio nulla vulputate massa, vel ultricies nulla purus sed lectus. Nam eu nisl odio. Aliquam vel quam sodales, pharetra quam vitae, tempus arcu. Morbi pharetra nisi id nunc interdum fringilla.</p>

            </div>

            <a class="button" href="#link-to-resource">Fermentum augue</a>

        </div>

    <!-- /li -->

    <li class="grid__item    gutter__item    masonry__item    u-width-1-of-1  u-width-1-of-2-from-large">

        <div class="resource-tile">

            <h2 class="resource-tile__title">In ullamcorper congue ultrices</h2>

            <div class="resource-tile__description  u-font-body-copy-small">

                <p>Curabitur non tortor sodales nulla sagittis vehicula vitae ac felis. Ut lacinia urna eu cursus tristique. Donec leo velit, interdum nec lacus in, scelerisque porttitor orci. Praesent hendrerit accumsan augue, sed mollis mauris gravida
                    in. Integer dignissim vulputate tempus. In ullamcorper congue ultrices. Suspendisse eu justo leo. Vestibulum leo arcu, placerat eget sapien non, convallis ultrices nibh. Etiam sollicitudin, risus eu placerat interdum, magna nisl
                    vulputate orci, eget feugiat ex orci blandit nisl. Integer posuere augue vel interdum luctus.</p>

            </div>

            <a class="button" href="#link-to-resource">Orci blandit nisl</a>

        </div>

    <!-- /li -->

</ul>