Style Guide
Introduction
The new J.P. Morgan Private Banking public site was designed on top of a 12 column bootstrap grid. It is a module or component based site, and every page from the home page to article pages are built out of components. These components can be added, re-arranged or removed depending on editorial needs.
About this Interactive Guide
This interactive style guide contains a set amount built-out components that illustrate the design and desired behavior across each responsive design breakpoint. All the required information, such as type styles and sizes, colors, image behavior and layout, is supplied within this guide.
The style guide is broken up into sections. Some sections contain specific components and the others global information. Global information sections are:
Not every component required to build the PB public site is fully defined here in the interactive guide, and any remaining components have been defined in a corresponding PDF, entitled the J.P Morgan technical Component guide. The defined components in the PDF guide will reference back to the interactive style guide as much as possible. For example, any type style that is defined here in the interactive guide will simply be referenced in the PDF, whereas any type style that is unique or not in this interactive guide be fully defined within the PDF.
Between the two guides formats, a complete front-end technical spec for building the PB public site is provided.
Components Animation
We would like the components to slide in on load. See reference.
Global Navigation Animation
We would like the overlay of the Global Navigation to animate it as per this reference.
Note
Note: All components have been named in an effort to align with the Functional Specifications document.