Styleguide notes


Footer component

Local footer

The local footer provides additional navigation to help the user orientate themselves within the current local site.

At wider screen widths, the top two levels of links appear. At smaller widths, only top-level links appear.

Global footer

The standard black global footer appears on all Cambridge sites. It contains general University reference links, plus links to the three strategic content areas that also appear in the global header.


Usage

At mobile resolution the footer structures will be simplified to show fewer options for ease of scrolling.

You can force a list to always be fully viewable at mobile resolution by adding the class "campl-page-children" to it (in the global footer, the About the University and Research at Cambridge lists have this applied).


Interaction

N/a


CSS and media queries

Separate desktop and mobile views are created by using a 767px max-width media query.

The horizontal layout of the footer columns will be collapsed into a vertical structure and unwanted nav items will be removed from the mobile view to reduce vertical scrolling.


Use of Javascript

Javascript is used to create equal height columns. Users without Javascript will see the actual height of each container.


Component variants

The local footer is optional.