Header
Overview
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.
Variants
Default header
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>