Base Elements

The basic components of the BCU layout are it's: Masthead, Navigation bar and Footer

Masthead

The Masthead always comprises of the BCU Logo on the left, followed by Site or Application name, and then search component or other site wide functionality on right. The logo is served as an embedded SVG within the CSS file svg.css.

Logo options

The BCU logo is provided as a Base64 encoded SVG background image. All you are required to to do to display the logo is have an element with class structure shown below:

By default the BCU logo appears white and can be place on brand blue background

An extra class can be added to invert the logo colour for use on a white background

---

Navigation bar

The Navigation bar comprises of the core site/application links. It is optional to use the drop down method we call "Mega Menus" to display deeper site links in a large panel. The Navigation bar's accent colour can be altered to another colour in the BCU colour palette, as long as it has been agreed with BCU CICT

Footer

The Footer comprises of various secondary page elements deemed either necessary or useful, such as; Address, Useful Links, Copyright, Legal Information. We are happy for you to change the content of the footer to best suit the application it serves, but please don't change the style.

This image gives an idea how the basic layout adapts to provide an experience more suited to the platform and media of the user. To get a better idea we suggest you look at our basic responsive template and enhanced responsive template. Read more about our responsive web design approach

Basic Responsive Template Enhanced Responsive Template (Added Breadcrumb, Left Nav)