Page elements

Standard elements for Zero Deposit pages. View page boilerplate for an example.

The header element should preceed an element <div class="PageContents"></div> to allow the content to stretch to fit the viewport should the contents not be tall enough to overflow the viewport.

Header

Site wide page header/search bar.

<header class="Header">
    <div class="ContentRow">
      <div class="ContentRow-contents Header-contents u-clearfix">
        <a href="//www.zerodeposit.com/">
          <i class="Svg Svg-logo-white-large"></i>
        </a>
        <div class="u-flex-filler"></div>
        <div class="Header-contact">
          <div class="Header-help">
            Need help?
          </div>
          <span class="PhoneLink">
            <span>01234 987654</span>
            <a href="tel:01234 987654">01234 987654</a>
          </span>
          <br>
          <a href="mailto:support@zerodeposit.com">Email us</a>
        </div>
      </div>
    </div>
</header>

Footer

Site wide page footer.

<footer class="Footer">
    <div class="ContentRow">
      <div class="ContentRow-contents">
        <div class="Footer-content u-clearfix">
          <div class="Footer-col Grid--whole Grid--medium-one-half Grid--large-one-third u-float-left">
            <ul class="Footer-links-list">
              <li><a href="#">Need more help?</a></li>
              <li><a href="#">FAQs</a></li>
              <li><a href="#">Terms and Conditions</a></li>
              <li><a href="#">Privacy Policy</a></li>
            </ul>
          </div>
          <div class="Footer-col Footer-col--social Grid--whole Grid--medium-one-half Grid--large-one-third u-float-right">
            <ul class="Footer-social-links">
              <li><a href="#"><i class="Icons-social-facebook"></i></a></li>
              <li><a href="#"><i class="Icons-social-linkedin"></i></a></li>
              <li><a href="#"><i class="Icons-social-twitter"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</footer>