- Full-Width Content Area
- Fixed-Width Sidebar - A fixed width sidebar configuration with the content area.
- Arc Navigation Side Menu- The side navigation of Arc XP is the same width as the Fixed With Sidebar
- Collapsible Sidebar - A Fixed Width Sidebar that can be collapsed off-screen. A portion of the sidebar, with an icon button, remain in-view, allowing user to toggle the sidebar back on-screen.
Not all screens make use of a page layout defined here. There may be exceptions for certain screens depending on the application.
For consistent visual padding on page containers, the internal padding is recommended to be set at
32px. This guarantees as users navigate throughout the product suite, that all left and right margins are flush and consistent, page-to-page.
The Sidebar & Arc Navigation Side Menu are both a fixed-width size at
300px. This ensures each sidebar has enough room for content, forms, and other elements to fit comfortably inside.
Some sidebars can be collapsed off-screen. These bars leave behind a portion of their background color, along with an icon (often referred to as a Charm Bar). This portion of the sidebar is recommended to be
#Collapsible sidebar control (charm bar)
When a collapsed sidebar is revealed, it’s width (
#Collapsible sidebar control & sidebar
300px) and the charm bar (
40px) create a width of
340px. This ensures that content in a collapsible sidebar still enjoy the same real estate as a static sidebar.
In some configurations, like in Composer, the charm bar is fixed to the right of the screen.