Layout

Usage

The layout is the top-most structural component in any view and acts as the main wrapper for smaller items within it.

The Layout component defines the main layout structure of a page by providing standard sizing and spacing for the different content areas.

Main Header

Main Header is positioned above the main content area. It provides space for a Display Heading that is used for a page title and for the main actions that can be performed on the screen.

Header uses Display heading for the page titles

Include page title to let users know where they are
Add a back button if the page has a parent
Provide the main action of the page in the Header

Don't

Don’t overcrowd the Header with too many actions

Sidebar provides space for navigation inside the current screen. Use it to allow users move between different content based on the use case or type of information

NavList component placed inside the sidebar to allow navigating between different sub-pages

Marketing section with navigation inside the sidebar.

Use the Sidebar to provide secondary navigation if needed

Don't

Don’t include main actions in the sidebar
Don’t include the page title in the sidebar
Don’t put inside the sidebar actions or information that are necessary to operate on the page

Main Content

Main content is used to place content that represents dominant functionality of the page. It can stretch full width of a container area or have a fixed width.

Main content usually contains lists of items or tables. For complex information or long forms, we recommend using the Grid component to distribute the elements.