Skip to main content
Experimental This website is used for testing – 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.

You must pick a variant for each button, otherwise it will look strange. It is not enough to use .bsk-btn on its own.

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="bsk-footer bsk-footer-default">
  <div class="bsk-container-fluid">
    Footer content
  </div>
</footer>

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

<footer class="bsk-footer bsk-footer-default">
  <div class="bsk-container-fluid">
    <div class="bsk-footer-is-something-wrong bsk-float-start">
      <a href="#" target="_blank">Is something wrong with this page?</a>
    </div>
    <div class="bsk-footer-back-to-top bsk-float-end">
      <a href="#site-top">Back to top</a>
    </div>
    <div class="div bsk-clearfix"></div>
    <div role="separator" class="bsk-footer-spacer"></div>
    <!-- main content -->
    <div class="bsk-row">
      <div class="bsk-col-md-6">
        Footer content with a <a href="#">link</a>
      </div>
    </div>
    <div role="separator" class="bsk-footer-divider"></div>
    <!-- Copyright & legal -->
    <div class="bsk-footer-governance bsk-float-start">
      The <a href="https://www.bas.ac.uk">British Antarctic Survey</a> (BAS) is part of <a href="https://www.ukri.org">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" 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" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</div>
    </div>
    <div class="bsk-footer-policy-links bsk-float-end">
      <ul class="bsk-list-inline">
        <li class="bsk-list-inline-item"><a href="#">Cookies</a></li>
        <li class="bsk-list-inline-item"><a href="#">Copyright</a></li>
        <li class="bsk-list-inline-item"><a href="#">Privacy</a></li>
      </ul>
      © (Year) British Antarctic Survey
    </div>
  </div>
</footer>

Components

Spacer

Use the .bsk-footer-spacer class on an element, to give additional padding.

Footer content above Footer content below 
<footer class="bsk-footer bsk-footer-default">
  <div class="bsk-container-fluid">
    Footer content above
    <div role="separator" class="bsk-footer-spacer"></div>
    Footer content below
  </div>
</footer>

Divider

Use the .bsk-footer-divider class on an element, give additional padding and a horizontal line.

Footer content above Footer content below 
<footer class="bsk-footer bsk-footer-default">
  <div class="bsk-container-fluid">
    Footer content above
    <div role="separator" class="bsk-footer-divider"></div>
    Footer content below
  </div>
</footer>

Use the .bsk-footer-is-something-wrong class to position and style a link to give site feedback.

<footer class="bsk-footer bsk-footer-default">
  <div class="bsk-container-fluid">
    <div class="bsk-footer-is-something-wrong bsk-float-start">
      <a href="#" target="_blank">Is something wrong with this page?</a>
    </div>
  </div>
</footer>

It’s strongly recommended to open feedback links in a new tab so users don’t loose their place in a process or information they were looking at.

Use the .bsk-footer-back-to-top class to position and style a link to the top of the current page.

<footer class="bsk-footer bsk-footer-default">
  <div class="bsk-container-fluid">
    <div class="bsk-footer-back-to-top bsk-float-end">
      <a href="#site-top">Back to top</a>
    </div>
  </div>
</footer>

Governance

Use the .bsk-footer-governance and .bsk-footer-ogl, .bsk-footer-ogl-symbol classes to 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="bsk-footer bsk-footer-default">
  <div class="bsk-container-fluid">
    <div class="bsk-footer-governance bsk-float-start">
      The <a href="https://www.bas.ac.uk">British Antarctic Survey</a> (BAS) is part of <a href="https://www.ukri.org">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" 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" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</div>
    </div>
  </div>
</footer>

Use the .bsk-footer-policy-links class to position and style links to policies such as copyright and privacy statements.

<footer class="bsk-footer bsk-footer-default">
  <div class="bsk-container-fluid">
    <div class="bsk-footer-policy-links bsk-float-end">
      <ul class="bsk-list-inline">
        <li class="bsk-list-inline-item"><a href="#">Cookies</a></li>
        <li class="bsk-list-inline-item"><a href="#">Copyright</a></li>
        <li class="bsk-list-inline-item"><a href="#">Privacy</a></li>
      </ul>
      © (Year) British Antarctic Survey
    </div>
  </div>
</footer>

Layouts

Fixed to bottom

Add the .bsk-footer-fixed-bottom class to fix a footer to the bottom of the page.

Fixed styles require additional padding on the body element. Otherwise the footer will cover up other page content. The Style Kit doesn’t provide styles for this, as it depends on the height of the footer in question.

The example below would normally use absolute positioning. It is disabled here to avoid breaking the site layout.

Footer content with a link
Copyright & Legal 
<footer class="bsk-footer bsk-footer-default bsk-footer-fixed-bottom">
  <!-- A '.fluid-container' is used for demonstration purposes, a '.container' would 'break out' of the example box -->
  <div class="bsk-container-fluid">
    Footer content with a <a href="#">link</a>
    <div role="separator" class="bsk-footer-divider"></div>
    <!-- Copyright & legal -->
    <div class="bsk-float-end">
      Copyright &amp; Legal
    </div>
  </div>
</footer>

Static bottom

Add the .bsk-footer-static-bottom class to create a full-width footer that scrolls away with the page.

Unlike with fixed footers, you do not need to change any padding on the body element with a static footer.

Footer content with a link
Copyright & Legal 
<footer class="bsk-footer bsk-footer-default bsk-footer-static-bottom">
  <!-- A '.fluid-container' is used for demonstration purposes, a '.container' would 'break out' of the example box -->
  <div class="bsk-container-fluid">
    Footer content with a <a href="#">link</a>
    <div role="separator" class="bsk-footer-divider"></div>
    <!-- Copyright & legal -->
    <div class="bsk-float-end">
      Copyright &amp; Legal
    </div>
  </div>
</footer>