Header - BAS Style Kit

Overview

Back to top
Link to section

Use the .bsk-header class to create an element with the illusion of a navbar, but using simpler, self-contained styles, and which doesn’t support navigation. The BAS Logo should be used in headers to reinforce the BAS brand.

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

Headers should only be used where the Navbar’s component is unsuitable, for example within external systems.

Default header

Live
Added in version 0.1.0
Back to top
Link to section

Headers need to use .bsk-header-container-fluid, instead of .bsk-container-fluid. The same styles are applied, but in a form that is self-contained for compatibility with other styles.

To look right, scale the logo or image in the header so that its height is one of these sizes and use the corresponding .bsk-header-image-{size} class on the same element.

Absolute Image Height (Px)	Header Image Class
64	.bsk-header-image-64

If you need to use a specific size not in this list you will need to use your own classes to add suitable padding

<header class="bsk-header bsk-header-default">
  <div class="bsk-header-container-fluid">
    <a href="#">
      <img class="bsk-header-image-64" alt="British Antarctic Survey Logo" src="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.3/img/logos-symbols/bas-logo-inverse-transparent-64.png">
    </a>
  </div>
</header>