Views

Overview

We offer three different ways to present content and link to content in a single page application: views, modals and pushbacks. Views are the default choice for housing content, while modals and pushbacks should only be used for the specific use cases detailed below.

Definition

A view in a single page application is just like a page on a website. It is defined as having a unique route — a specific location within the IA of the application. This distinguishes a view from a modal, which only lives on top of a view and can exist across many views.

Anatomy

Views contain a page wrapper consisting of a header and a footer. Between the header and the footer is the layout, which is the arrangement of components within the view.

For more details on the layout, see Grid and Cards.

Page Wrapper = Header and footer
Header = Site navigation and global functionality
Footer = Reprised navigation, company information, and social links
Layout = A collection of components in a specific arrangement contained by the grid that lives between the page wrapper

Example - Account Hub (Authenticated)