Hero

<header class="hero panel">

    <div class="hero__image-wrapper">

        <div class="hero__image-container">

            <svg class="hero__image-background" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 642.8" role="presentation">

                <polygon fill="#9DB6C2" points="0,0 750,0 750,205 0,642.8 " />

                <polygon fill="#658C9F" points="1500,642.8 750,205 750,0 1500,0 " />

            </svg>

            <img alt="" class="hero__image" src="../../images/hero.svg">

        </div>

    </div>

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

        <h1 class="hero__title">Understanding Patient Data</h1>

        <ul class="grid  grid--center    gutter  gutter--large">

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

                <a class="key-info-tile" href="#link-to-page">

                    <div class="key-info-tile__icon">

                        <svg class="svg-icon svg-icon--inline" xmlns="http://www.w3.org/2000/svg" role="presentation">

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

                        </svg>

                    </div>

                    <p class="key-info-tile__text">Using patient data is essential to improve health and deliver better care</p>

                    <div class="cta  cta--arrow">How data is used</div>

                </a>

            <!-- /li -->

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

                <a class="key-info-tile" href="#link-to-page">

                    <div class="key-info-tile__icon">

                        <svg class="svg-icon svg-icon--inline" xmlns="http://www.w3.org/2000/svg" role="presentation">

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

                        </svg>

                    </div>

                    <p class="key-info-tile__text">There must be robust safeguards to protect patient confidentiality when data is used</p>

                    <div class="cta  cta--arrow">How it is kept safe</div>

                </a>

            <!-- /li -->

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

                <a class="key-info-tile" href="#link-to-page">

                    <div class="key-info-tile__icon">

                        <svg class="svg-icon svg-icon--inline" xmlns="http://www.w3.org/2000/svg" role="presentation">

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

                        </svg>

                    </div>

                    <p class="key-info-tile__text">Everyone should know how patient data is used and why, and what choices you can make</p>

                    <div class="cta  cta--arrow">Resources</div>

                </a>

            <!-- /li -->

        </ul>

        <p class="hero__intro">More than two thirds of the population do not feel they know how health data is used in the NHS. We want to change that. Understanding Patient Data has been set up to support conversations with the public, patients and healthcare professionals
            about how health and care data is used, providing resources for people to find out more.</p>

    </div>

</header>