<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">Title goes here</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">

        <article class="layout__item" id="primary">

            <div class="layout__wrapper">

                <div class="content    u-font-body-copy">

                    <section class="accordion">

                        <a aria-controls="accordion-patient-data" aria-expanded="false" class="accordion__trigger" data-toggle="is-open" href="#patient-data" id="patient-data">

                            <h3 class="accordion__title">Patient data</h3>

                        </a>

                        <div class="accordion__content" id="accordion-patient-data">

                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper porta eleifend. Curabitur condimentum neque vitae porta fermentum. Suspendisse consequat turpis leo, sed elementum velit fermentum at. Quisque libero
                                lorem, consectetur id blandit tempor, cursus elementum lectus. Nullam maximus fringilla metus eget eleifend. Donec augue sapien, lacinia eget dui sed, imperdiet rhoncus nulla. Aenean vel convallis urna, id porta purus.
                                Vestibulum semper ante eget neque gravida, et facilisis metus semper. Nunc in metus ut nibh lacinia varius in quis est. Suspendisse quis tincidunt erat. Phasellus est arcu, cursus sit amet elementum in, lacinia vel
                                leo.</p>

                        </div>

                    </section>

                    <section class="accordion">

                        <a aria-controls="accordion-individual-care" aria-expanded="false" class="accordion__trigger" data-toggle="is-open" href="#individual-care" id="individual-care">

                            <h3 class="accordion__title">Individual care</h3>

                        </a>

                        <div class="accordion__content" id="accordion-individual-care">

                            <p>Etiam mattis, leo et ultricies tincidunt, nisi elit lobortis risus, nec tristique augue justo ac massa. Donec venenatis, nibh ac elementum auctor, sapien nisi pretium nulla, non hendrerit libero justo eget lorem. Donec
                                sagittis blandit libero quis convallis. Vestibulum sagittis interdum augue, bibendum mattis magna elementum vitae. Donec sapien libero, maximus id volutpat fermentum, faucibus eu ante. Fusce interdum maximus eleifend.
                                Curabitur id nisi id sem efficitur interdum. Sed in sollicitudin enim. Vivamus commodo massa a diam faucibus porta. Vestibulum condimentum, magna vitae venenatis porttitor, urna arcu condimentum sem, at luctus orci
                                mauris tristique nibh.</p>

                        </div>

                    </section>

                    <section class="accordion">

                        <a aria-controls="accordion-improving-health" aria-expanded="false" class="accordion__trigger" data-toggle="is-open" href="#improving-health" id="improving-health">

                            <h3 class="accordion__title">Improving health, care and services through research and planning</h3>

                        </a>

                        <div class="accordion__content" id="accordion-improving-health">

                            <p>Cras ac vestibulum lorem. Quisque lobortis magna ac posuere suscipit. Sed blandit vel lorem nec facilisis. Nulla eget varius tellus, quis consectetur velit. Ut dui urna, iaculis quis massa in, dapibus vulputate tellus.
                                Sed dictum neque et convallis imperdiet. Quisque id sem ultricies, ultrices elit sit amet, rhoncus eros. Fusce mollis rhoncus sem sit amet pulvinar.</p>

                        </div>

                    </section>

                </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 &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: @accordion-only-template
  • Preview:
  • Filesystem Path: src/components/04-templates/accordion-only-template/accordion-only-template.nunj
  • References (1): @page

There are no notes for this item.