REMOVED
This component has been removed from the Framework.
- Added on: v4.0.0 (20/07/18)
- Removed on: v5.0.0 (05/10/20)
Partner themes
The partner theme currently allows modifications to the global masthead to enable the addition of a custom logo, with an option of either a light grey or white background. With this theme, the masthead becomes deeper (80px instead of 60px), and down/up chevrons are added to indicate where menu options are expandable.
Design and usage
Structure
- The custom masthead adopts the same structure as the standard global masthead.
- The background colour of the masthead is either light grey (#F9F9F9) or white (#FFF).
- The custom masthead can also house different sizes / ratios of brand logos; this is to allow for the flexibility to cater for all logo types. The maximum logo size is 180px wide or 60px deep, whichever is the greater.
Labels
- The labels for the links within the custom masthead adopt the same structure, padding, and styling as the standard global masthead.
Errors
- Error messages and notifications adopt the same structure, padding, and styling as the standard global masthead.
Accessibility and screen readers
- The custom masthead adopts the accessibility and screen reader guidance from the standard global masthead.
Non-JS requirements and considerations
- Follows standard global masthead rules for non-JS.
Placement
- The custom masthead must be placed at the top of the browser window.
- The custom masthead can be pushed down by our default cookie acceptance message.
Use case and exception scenarios
- The custom masthead should only be used on co-branded workplace pensions microsites/pages.
- The custom masthead should not be used on Abeille Assurances webpages.
Interactive examples
Grey background, deep logo (logged in)
A static example is shown below, and a working example can be seen on the partner theme - grey background, deep logo (logged in) page.
White background, wide logo (logged out)
A static example is shown below, and a working example can be seen on the partner theme - white background, wide logo (logged out) page.
Grey background, standard logo (logged out, no search)
A static example is shown below, and a working example can be seen on the partner theme - grey background, standard logo (logged out, no search) page.
Code examples
Change masthead background colour
Change:
<div class="o-masthead u-clear--inner t-accent-light t-accent-light--5" data-module="o-masthead" data-module-load="true">to:
<div class="o-masthead u-clear--inner t-accent-light t-accent-light--5 o-masthead--white" data-module="o-masthead" data-module-load="true">Change partner logo
Update:
<a class="o-masthead-logo__link" href="..." aria-label="...">
<img class="o-masthead-logo__image" src="..." alt="...">
</a>Development and test
Notes for developers
Theme css file locations
Themes work by replacing the default CSS with customised versions of the files which are located in a different directory. To access these files, update links to any Framework CSS files by altering:
<link media="all" href="[ CDN Folder Path ]/css/customer/[ CSS file name ]" rel="stylesheet" />to:
<link media="all" href="[ CDN Folder Path ]/css/partner/[ CSS file name ]" rel="stylesheet" />Theme-specific information
The default styling for the partner theme extends the height of the masthead area to 80px and changes its background colour to lightest grey (#F9F9F9).
To change the background colour to white, add the .o-masthead--white class to the .o-masthead div.
To change the partner logo, update the href link and aria details for the .o-masthead-logo__link anchor tag and update the src and alt tags for its child img.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.o-masthead--white |
Modifier to change the masthead background colour to white | .o-masthead |
Partner them default: lightest grey #F9F9F9 |
Component releases
- Added on: v4.0.0 (20/07/18)
- Removed on: v5.0.0 (05/10/20)
Latest update:
- Partner theme removed from use as automated theming and the new variants added to masthead allow for the creation of matching themes and even greater customisation.