Page Layout
In progress
Layouts are common configurations of structural pieces. With a consistent set of layouts, we strive to support our design principles:
-
Purposeful and Familiar. Choosing layouts that are consistent creates an experience that is recognizable across the features of the application.
-
Guide don’t direct. Choosing the right layout guides the user through the interface by prioritizing the content in a manner that meets the user's needs, and helps them know what comes next.
Before selecting a layout, review these guidelines
-
Know your use case. Understand how the information on the page will be used.
-
Prioritize your content. Organize your content to highlight the most important information.
-
Group related content together. Make it efficient for users to work with the content.
Structural pieces and layering logic
To provide stability and predictability, global strucural pieces like the navigation and content areas are always the base layer. Modals, sliding panels, popovers, etc. are dynamic contextual structural pieces, and always layer on top of that base layer.
Main Navigation
The main navigation of the application is located at the left of the screen. When the viewport is wide enough (1200px), it persists. If the viewport is not is between the medium and large breakpoint sizes, it is hidden offscreen and compresses the main page contents when opened. Below the Medium breakpoint the Main Navigation menu is hidden by default and opens as an overlay on top of the main contents and Header Nav.
Header Navigation
The header navigation is located at the top of the screen. It is comprised of the user-centric functions, along with Search, breadcrumbs, and the toggle for the Main Navigation. The user functions can be hidden (in priority order) on narrow viewports when the available space can not accommodate them.
Due to size constraints, when the screen is below the Large breakpoint, the breadcrumb is hidden and replaced by the Main Navigation toggle