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 SiteMaxWidthContainer 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.

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.