Select a title

UI Toolkit


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.

Site wide page header/search bar.

Need help?
01234 987654 01234 987654
Email us

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

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>
          <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>