Page
Page with everything on
Page layouts are modular and have the ability to add or remove components as needed for the design. These examples are colored for illustrative purposes only.
By default, the entire page will always be 100% of the window's width; to max out the typical width and center the page, set the restrictWidth prop to true. You can also pass an integer to this property to max out the width at a custom pixel value or a string with a custom measurement.
Page title
Content title
Simple page with title
Most pages don’t have sidebars. A lot of our pages don’t have extra abilities next to the title. Simply exclude those components and everything will still line up.
Page title
Content title
Page with content only
We can further simplify pages by only showing the content.
Content title
Page content centered
The page content can be optionally centered either vertically or horizontally. This is useful for various empty states.
Content title
Page content centered in a full layout
Centering the content can happen regardless of layout configuration. In this example, we’re centering within a complex sidebar layout.