New This website is new, your feedback will help us to improve it.

Footer

Overview

Use the .bsk-footer class as a general purpose element to create slim, minimal elements with only simple text, or fat elements, containing navigation links, information and actions.

Whereas navbar's contain only crucial information, such as the name of a project/service and navigation links, footers typically contain important or additional information, but that isn't vital to show straight away, such as copyright and privacy links.

The footer component is designed to be compatible with almost all other components and core styles, however it is strongly recommended to use a container

Variants

Footer content 
<footer class="bg-black py-6">
  <div class="container text-white mx-auto px-6 fhd:px-16">
      Footer content
  </div>
</footer>

This example, whilst more complex, demonstrates the sort of information shown in a typical footer.

<footer class="bg-black py-6">
  <div class="container text-white mx-auto px-6 fhd:px-16">
      <!-- main content -->
      <div class="mb-4">
          Footer content with a <a href="#" class="underline">link</a>
      </div>
      <hr role="separator">
      <!-- Copyright & legal -->
      <div>
          The <a href="https://www.bas.ac.uk" class="underline">British Antarctic Survey</a> (BAS) is part of <a href="https://www.ukri.org" class="underline">UK Research and Innovation</a> (UKRI)
          <div class="bsk-footer-ogl">
              <div class="bsk-ogl-symbol">
                  <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence" class="underline" rel="license">
                      <span class="bsk-ogl-symbol">Open Government Licence</span>
                  </a>
              </div>
              All content is available under the <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence" class="underline" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
          </div>
      </div>
      <hr role="separator">
      <div class="mt-4">
          <ul class="flex space-x-4 list-inline float-left">
              <li class="underline"><a href="#">Cookies</a></li>
              <li class="underline"><a href="#">Copyright</a></li>
              <li class="underline"><a href="#">Privacy</a></li>
          </ul>
          <div class="float-right">
              <a href="#" class="underline">Is something wrong with this page?</a>
          </div>
      </div>
      <div class="clear-right"></div>
      <div class="text-center mt-4">
          © 2026 British Antarctic Survey
      </div>

  </div>
</footer>

Components

Spacer

Use Tailwind classs on an element, to give additional space.

Footer content above Footer content below 
<footer class="bg-black py-6">
  <div class="container text-white mx-auto px-6 fhd:px-16">
      Footer content above
      <div role="separator" class="my-4"></div>
      Footer content below
  </div>
</footer>

Divider

Use a <hr> element, to create a divider

Footer content above
Footer content below 
<footer class="bg-black py-6">
  <div class="container text-white mx-auto px-6 fhd:px-16">
      Footer content above
      <hr role="separator">
      Footer content below
  </div>
</footer>
<footer class="bg-black py-6">
  <div class="container text-white mx-auto px-6 fhd:px-16">
      <div>
          <a href="#" class="underline">Is something wrong with this page?</a>
      </div>
  </div>
</footer>

Use the Back To Top button. This element requires the BAS style kit javascript to work.

To display here, this example removes the following classes from the button element. Add them back to make it work.
!fixed bottom-5 end-5 opacity-0 transition-opacity duration-300 

<button
type="button"
id="btn-back-to-top"
class="z-50 p-2 cursor-pointer rounded-full bsk-bg-blue outline-2 outline-white text-white shadow-md">
<span class="[&>svg]:w-4">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
  </svg>
</span>
</button>

Governance

Position and format a statement explaining BAS is part of UKRI, and that content is licensed under the Open Government License using the OGL Symbol.

<footer class="bg-black py-6">
  <div class="container text-white mx-auto px-6 fhd:px-16">
      <div>
          <ul class="flex space-x-4 list-inline">
              <li class="underline"><a href="#">Cookies</a></li>
              <li class="underline"><a href="#">Copyright</a></li>
              <li class="underline"><a href="#">Privacy</a></li>
          </ul>
      </div>
  </div>
</footer>

Links to policies such as copyright and privacy statements.

<footer class="bg-black py-6">
  <div class="container text-white mx-auto px-6 fhd:px-16">
      <div>
          The <a href="https://www.bas.ac.uk" class="underline">British Antarctic Survey</a> (BAS) is part of <a href="https://www.ukri.org" class="underline">UK Research and Innovation</a> (UKRI)
          <div class="bsk-footer-ogl">
              <div class="bsk-ogl-symbol">
                  <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence" class="underline" rel="license">
                      <span class="bsk-ogl-symbol">Open Government Licence</span>
                  </a>
              </div>
              All content is available under the <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence" class="underline" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
          </div>
      </div>
  </div>
</footer>

Layouts

Fixed to bottom

Adding the following classes to the footer element will fix the footer to the bottom of the page:
fixed right-0 bottom-0 left-0

<footer class="bg-black py-6">
  <div class="container text-white mx-auto px-6 fhd:px-16">
      <div>
          The <a href="https://www.bas.ac.uk" class="underline">British Antarctic Survey</a> (BAS) is part of <a href="https://www.ukri.org" class="underline">UK Research and Innovation</a> (UKRI)
          <div class="bsk-footer-ogl">
              <div class="bsk-ogl-symbol">
                  <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence" class="underline" rel="license">
                      <span class="bsk-ogl-symbol">Open Government Licence</span>
                  </a>
              </div>
              All content is available under the <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence" class="underline" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
          </div>
      </div>
  </div>
</footer>

Static bottom