Site Header

The site header is a global site component for the entire site. It is viewable on every single page on the website and provides navigation, contact information and links to favourites.

Dependencies

Needs the following to work.

Components:

Site Header

The default site header appears on all pages throughout listers.co.uk. It is a global navigation component which opens numerous options/links for getting across listers.co.uk.

Simple

A simple site header for reduced UI scenarios, like 404 pages, or login pages.

On Dark

When layering the site header on top of any hero component, use the hero class to give the header contrast.

Brand Logo Link

When the page is manufacturer specific, place the brands logo next to the Listers logo.

Favourites Button Animation

When added a vehicle to favourites, the icon within the favourite button reacts and provides a subtle micro interaction showing a change of state.