<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Page Wrappers

Page Wrappers are a group of components which wrap up the major elements of the page to provide a standard layout, and to support any behaviours we want to be consistent across the site.

Page Wrappers are a group of components which wrap up the major elements of the page to provide a standard layout, and to support any behaviours we want to be consistent across the site.

Usage

A basic page layout rendering example:

The preview has been updated.

Share
Share

For the Vistaprint site, some of these elements (like the header and the SkipLink) are provided via Bookends, so you don't need to add them yourself.

Props

SkipLink
This component is implemented using the <a /> as the root element. You can utilize the native attributes supported by <a /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
MainContentStart
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SiteContent
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SiteMain
This component is implemented using the <main /> as the root element. You can utilize the native attributes supported by <main /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


MainContentStartSiteContentSiteMainSkipLink
Published: Aug 10, 2022Last updated: Sep 18, 2024