UI Style Guide

Header

This component is used to display current branch logo, provide a link back to the MPI site home page, login information page, contact information page, ability to search the site, and navigate through to any page using the primary navigation.

Example usage

Details

ID
#header
Elements
.header
.header__nav
.header__branchLogo

Banner

This component is primarily used to hold branch banner (Refer to the Imagery section of the Brand Style Guide). Content authors also have the ability to override this by uploading a hero image and choosing the option to the banner image as a banner.

Example usage

Details

ID
#banner
Elements
.banner
.banner__overlay

Breadcrumbs

This component displays the current page path, in addition to social media sharing.

Example usage

 


Nav

This component allows visitors to navigate to top level pages, and child pages which are loaded on demand.


Side Nav

This component provides visitors a way to see where the content page currently being viewed sits within the rest of the site's content.


Feature Tile


Promo Tiles


Expandables


Forms

Last reviewed: