Complete Page Layout Examples
There are three main types of page layouts in our ecosystem which can be built with top-level components in this library. Clicking on the buttons in the descriptions below will launch the associated example in a fullscreen layout.
Crate Layout
Along with a global nav and global footer, this layout uses a HeaderCrate and ContentCrate together to form the main content of a page.
This layout is exemplified by app.starbucks.com.
Max Width Layout
This layout uses a XL-sized ContentColumn to limit all main content to a defined max width. The global nav and global footer both accept a `useMaxWidthLayout` prop to ensure gutters that line up accordingly.
This layout is exemplified by the homepage of starbucks.com.
Reading Width Layout
This layout uses a LG-sized ContentColumn to limit all main content to a defined large width. The global nav and global footer both accept a `useMaxWidthLayout` prop to ensure gutters that line up accordingly.
Full Width Layout
This layout uses a FullWidthContainer to line up all main content gutters with the global nav and global footer.
This layout is exemplified by the starbucks.com Menu page.