<header class="site-header">

    <a href="/">

        <img alt="Understanding Patient Data" class="site-header__logo" src="../../images/logo.svg">

    </a>

    <div class="site-header__navigation    drop-down" id="site-header-navigation">

        <div class="site-header__drop-down  drop-down__container">

            <nav class="header-nav">

                <ul class="header-nav__list">

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">About us</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">What you need to know</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">Supporting conversations</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">Case studies</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">News</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">Contact</a>

                    </li>

                </ul>

            </nav>

        </div>

    </div>

    <a aria-controls="site-header-navigation" aria-expanded="false" class="site-header__button    u-display-none-from-visible-navigation" data-toggle="is-open" data-toggle-group="site-header" href="#site-header-navigation">

        <svg class="svg-icon  svg-icon--inline" role="presentation">

            <title>Navigation menu</title>

            <use xlink:href="#svg-icon-hamburger" />

        </svg>

    </a>

    <div class="site-header__search    drop-down" data-focus="#header-search" id="site-header-search">

        <div class="site-header__drop-down    drop-down__container">

            <form class="header-search">

                <label class="u-visually-hidden" for="header-search">Search the entire Understanding Patient Data site</label>

                <button class="site-header__button    header-search__button  js-header-search" type="submit">

                    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" title="Search">

                        <title>Search</title>

                        <use class="header-search__icon  header-search__icon--mobile" xlink:href="#svg-icon-arrow" />

                        <use class="header-search__icon  header-search__icon--desktop" xlink:href="#svg-icon-search" />

                    </svg>

                </button>

                <input class="header-search__input" id="header-search" placeholder="Search..." required type="search">

            </form>

        </div>

    </div>

    <a aria-controls="site-header-search" aria-expanded="false" class="site-header__button    u-display-none-from-visible-navigation" data-toggle="is-open" data-toggle-group="site-header" href="#site-header-search">

        <svg class="svg-icon  svg-icon--inline" role="presentation">

            <title>Search</title>

            <use xlink:href="#svg-icon-search" />

        </svg>

    </a>

</header>

<div class="site-header  site-header--placeholder"></div>

<header class="page-header">

    <div class="wrapper  wrapper--gutter">

        <h1 class="page-header__title">News</h1>

        <p class="page-header__subheading">Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at</p>

    </div>

</header>

<div class="wrapper  wrapper--gutter">

    <main class="layout">

        <div class="layout__item">

            <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-medium  u-width-1-of-3-from-x-large">

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">Missing NHS medical correspondence</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">NHS data loss: 500 patients may have suffered serious harm in data scandal</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">NHS misplaced half a million patient documents</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">Pellentesque faucibus facilisis metus, ut faucibus purus volutpat nec</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">Missing NHS medical correspondence</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">NHS data loss: 500 patients may have suffered serious harm in data scandal</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">NHS misplaced half a million patient documents</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">Pellentesque faucibus facilisis metus, ut faucibus purus volutpat nec</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">Missing NHS medical correspondence</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">NHS data loss: 500 patients may have suffered serious harm in data scandal</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">NHS misplaced half a million patient documents</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

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

                    <a class="news-tile" href="#link-to-destination">

                        <time class="news-tile__date" datetime="2017-02-27T12:34:00.000Z">27 Feb 2017</time>

                        <h2 class="news-tile__title">Pellentesque faucibus facilisis metus, ut faucibus purus volutpat nec</h2>

                        <div class="cta  cta--small  cta--arrow">Read more</div>

                    </a>

                <!-- /li -->

            </ul>

            <ul class="search-pagination  search-pagination--center">

                <li class="search-pagination__item  search-pagination__item--step">

                    <a class="search-pagination__control" href="#link-to-previous-results">

                        <svg class="svg-icon svg-icon--inline" xmlns="http://www.w3.org/2000/svg" title="Previous results">

                            <title>Previous results</title>

                            <use xlink:href="#svg-icon-chevron-left" />

                        </svg>

                    </a>

                <!-- /li -->

                <li class="search-pagination__item search-pagination__item--link">

                    <a class="search-pagination__control" href="#link-to-page-1">

                1

            </a>

                <!-- /li -->

                <li class="search-pagination__item search-pagination__item--link">

                    <a class="search-pagination__control" href="#link-to-page-2">

                2

            </a>

                <!-- /li -->

                <li class="search-pagination__item">

                    <span class="search-pagination__control  search-pagination__control--active">

                3

            </span>

                <!-- /li -->

                <li class="search-pagination__item search-pagination__item--link">

                    <a class="search-pagination__control" href="#link-to-page-4">

                4

            </a>

                <!-- /li -->

                <li class="search-pagination__item search-pagination__item--link">

                    <a class="search-pagination__control" href="#link-to-page-5">

                5

            </a>

                <!-- /li -->

                <li class="search-pagination__item  search-pagination__item--step">

                    <a class="search-pagination__control" href="#link-to-next-results">

                        <svg class="svg-icon svg-icon--inline" xmlns="http://www.w3.org/2000/svg" title="Next results">

                            <title>Next results</title>

                            <use xlink:href="#svg-icon-chevron-right" />

                        </svg>

                    </a>

                <!-- /li -->

            </ul>

        </div>

    </main>

</div>

<footer class="site-footer">

    <div class="wrapper  wrapper--gutter">

        <ul class="site-footer__sections">

            <li class="site-footer__section  site-footer__section--primary    u-width-1-of-2-from-medium  u-width-1-of-3-from-large">

                <a href="/">

                    <img alt="Understanding Patient Data" class="site-footer__logo" src="../../images/logo.svg">

                </a>

                <ul class="site-footer__socials  grid    gutter  gutter--small">

                    <li class="grid__item    gutter__item">

                        <a class="site-footer__social-link" href="#link-to-twitter">

                            <svg class="svg-icon svg-icon--circular site-footer__social-icon" xmlns="http://www.w3.org/2000/svg" title="Follow us on Twitter">

                                <title>Follow us on Twitter</title>

                                <use xlink:href="#svg-icon-twitter" />

                            </svg>

                        </a>

                    <!-- /li -->

                    <li class="grid__item    gutter__item">

                        <a class="site-footer__social-link" href="#link-to-linkedin">

                            <svg class="svg-icon svg-icon--circular site-footer__social-icon" xmlns="http://www.w3.org/2000/svg" title="Follow us on LinkedIn">

                                <title>Follow us on LinkedIn</title>

                                <use xlink:href="#svg-icon-linkedin" />

                            </svg>

                        </a>

                    <!-- /li -->

                    <li class="grid__item    gutter__item">

                        <a class="site-footer__social-link" href="#link-to-facebook">

                            <svg class="svg-icon svg-icon--circular site-footer__social-icon" xmlns="http://www.w3.org/2000/svg" title="Follow us on Facebook">

                                <title>Follow us on Facebook</title>

                                <use xlink:href="#svg-icon-facebook" />

                            </svg>

                        </a>

                    <!-- /li -->

                </ul>

            <!-- /li -->

            <li class="site-footer__section    u-width-1-of-2-from-medium  u-width-1-of-3-from-large">

                <span class="site-footer__text  site-footer__text--title">Contact us</span>

                <dl class="list-bare">

                    <dt class="u-visually-hidden">Telephone</dt>

                    <dd>

                        <a class="site-footer__text  site-footer__text--phone" href="tel:+4420786118646">+44 207 8611 8646</a>

                    </dd>

                    <dt class="u-visually-hidden">Email</dt>

                    <dd>

                        <a class="site-footer__text" href="mailto:hello@understandingpatientdata.org.uk">hello@understandingpatientdata.org.uk</a>

                    </dd>

                </dl>

            <!-- /li -->

            <li class="site-footer__section   u-width-1-of-2-from-medium  u-width-1-of-3-from-large">

                <form>

                    <label class="site-footer__text  site-footer__text--title" for="subscribe">Join our mailing list</label>

                    <input class="site-footer__input" id="subscribe" placeholder="Email address" required type="email"><!-- Avoid whitespace between elements

            --><button class="site-footer__submit" type="submit">Sign up</button>

                </form>

            <!-- /li -->

        </ul>

        <div class="site-footer__details">

            <span class="site-footer__detail">Copyright 2017 Wellcome Trust Ltd.</span>

            <ul class="site-footer__detail    list-delimited">

                <li>

                    <a href="#link-to-ts-and-cs">Terms &amp; conditions</a>

                </li>

                <li>

                    <a href="#link-to-privacy-policy">Privacy policy</a>

                </li>

            </ul>

            <a class="site-footer__hactar" href="http://hactar.is/">

                <img alt="Made by Hactar" src="../../images/made-by-hactar.svg">

            </a>

        </div>

    </div>

</footer>
  • Handle: @news-listing-template
  • Preview:
  • Filesystem Path: src/components/04-templates/news-listing-template/news-listing-template.nunj
  • References (1): @page

There are no notes for this item.