Skip to main content

Footer

The footer matches the colour scheme of the header.

It should go directly under the page feedback component (if applicable).

It must provide the following links and in this order:

<footer class="footer light-footer bg-grey-dark has-p-4">
  <div class="container">
    <div class="footer-container">
      <nav class="footer-nav">
        <ul class="nav-items list-unstyled">
          <li>
            <a class="nav-link" href="https://bristol.gov.uk/contact"
              >Contact</a
            >
          </li>
          <li>
            <a class="nav-link" href="https://bristol.gov.uk/complaints"
              >Complaints and feedback</a
            >
          </li>
          <li>
            <a class="nav-link" href="https://bristol.gov.uk/cookies"
              >Cookies</a
            >
          </li>
          <li>
            <a class="nav-link" href="https://bristol.gov.uk/privacy"
              >Privacy</a
            >
          </li>
          <li>
            <a class="nav-link" href="https://bristol.gov.uk/accessibility"
              >Accessibility</a
            >
          </li>
          <li>
            <a class="nav-link" href="https://bristol.gov.uk/copyright"
              >Copyright</a
            >
          </li>
        </ul>
      </nav>
      <div class="brand-container">
        <a
          class="brand"
          href="/"
          title="Go to the https://bristol.gov.uk homepage"
        >
          <div role="img" class="brand-img" aria-label="Bristol City Council">
            <svg></svg>
          </div>
        </a>
      </div>
    </div>
  </div>
</footer>

Main website only​

(for use on main website only)​

This footer is used to show people they are on the main Bristol City Council website. Only use the main footer when building a page that sits on the main Bristol City Council website. Do not use for third party websites. There is an option to add a larger logo with more content.

 <footer class="footer site-footer bg-black has-p-4">
    <div class="container">
        <div class="footer-container">
            <nav class="footer-nav">
                <ul class="nav-items list-unstyled">
                    <li><a class="nav-link" href="https://bristol.gov.uk/contact">Contact</a></li>
                    <li><a class="nav-link" href="https://bristol.gov.uk/complaints">Complaints and feedback</a></li>
                    <li><a class="nav-link" href="https://bristol.gov.uk/cookies">Cookies</a></li>
                    <li><a class="nav-link" href="https://bristol.gov.uk/privacy">Privacy</a></li>
                    <li><a class="nav-link" href="https://bristol.gov.uk/accessibility">Accessibility</a></li>
                </ul>
            </nav>
            <div class="brand-container has-extra-brand">
                <div class="extra-brand" >
                    <a href="_#" title="Go to the https://bristol.gov.uk homepage">
                        <div role="img" class="brand-img" aria-label="Bristol City Council">
                        <svg>Logo svg goes here</svg>
                    </a>
                    <a href="_#" title="Go to the https://bristol.gov.uk homepage">
                        <div role="img" class="brand-img" aria-label="Bristol City Council">
                        <svg>Logo svg goes here</svg>
                    </a>
                </div>
            </div>
            <div class="social-container">
                <div class="social-wrapper">
                    <h4>Follow us:</h4>
                    <ul class="social-items list-unstyled">
                        <li>
                            <a target="_blank" href="http://www.facebook.com/BristolCouncil"
                                aria-label="Follow us on Facebook" data-social-name="Facebook">Facebook</a>
                        </li>
                        <li>
                            <a target="_blank" href="http://www.twitter.com/bristolcouncil"
                                aria-label="Follow us on X" data-social-name="X">X</a>
                        </li>
                        <li>
                            <a target="_blank" href="http://www.youtube.com/bristolcitycouncil"
                                aria-label="Follow us on Youtube" data-social-name="Youtube">Youtube</a>
                        </li>
                        <li>
                            <a target="_blank" href="http://www.flickr.com/photos/bristolcouncil"
                                aria-label="Follow us on Flickr" data-social-name="Flickr">Flickr</a>
                        </li>
                        <li>
                            <a target="_blank" href="https://www.instagram.com/bristolcouncil"
                                aria-label="Follow us on Instagram" data-social-name="Instagram">Instagram</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="copyright-container">
                <p>Copyright © 2022 Bristol City Council</p>
            </div>
        </div>
    </div>
</footer>