<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>
<a aria-controls="popup-refine" aria-expanded="false" class="site-header__popup-bar u-display-none-from-complex-layout" data-toggle="is-open" data-toggle-group="site-header" href="#popup-refine">
Refine by
</a>
</header>
<div class="site-header site-header--placeholder site-header--popup"></div>
<header class="page-header">
<div class="wrapper wrapper--gutter">
<h1 class="page-header__title">Search results</h1>
<div class="page-header__search">
<form class="search">
<label class="u-visually-hidden" for="search">Search the entire Understanding Patient Data site</label>
<input class="search__input" id="search" required type="search" value="Lorem ipsum">
<button class="search__submit" type="submit">
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" title="Search">
<title>Search</title>
<use xlink:href="#svg-icon-search" />
</svg>
</button>
</form>
</div>
</div>
</header>
<div class="wrapper wrapper--gutter">
<main class="layout">
<aside class="layout__item layout__item--secondary">
<div class="layout__wrapper">
<div class="pop-up pop-up--layout" id="popup-refine">
<form class="refine">
<fieldset class="refine__category">
<legend class="refine__title">Content type</legend>
<div class="refine__options">
<input id="content-type-news" name="" type="checkbox">
<label class="refine__option" for="content-type-news">News</label>
<input id="content-type-case-study" name="" type="checkbox">
<label class="refine__option" for="content-type-case-study">Case study</label>
<input id="content-type-report" name="" type="checkbox">
<label class="refine__option" for="content-type-report">Report</label>
<input id="content-type-resource" name="" type="checkbox">
<label class="refine__option" for="content-type-resource">Resource</label>
<input id="content-type-presentation" name="" type="checkbox">
<label class="refine__option" for="content-type-presentation">Presentation</label>
</div>
<button class="refine__clear button button--tertiary button--tiny" type="reset">Clear</button>
</fieldset>
<button class="button button--block button--secondary" type="submit">Apply filters</button>
</form>
</div>
</div>
</aside>
<article class="layout__item layout__item--primary" id="primary">
<div class="layout__wrapper">
<div class="search-results">
<header class="search-results__header">
<span class="search-results__count">123 results</span>
</header>
<ul class="list-bare">
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
<li>
<a class="search-result" href="#link-to-page">
<span class="search-result__category">Content type</span>
<h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>
<p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>
</a>
</li>
</ul>
<ul class="search-pagination">
<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>
</div>
</article>
</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 & 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>
There are no notes for this item.