Page Wrappers

See Page Layout for guidance on using Page Wrappers with other layout components.

Default

SiteContent should be the highest item in the DOM tree, which should contain a SkipLink, SiteMain, and MainContentStart.

For pages that render the Header through Bookends, the SkipLink is already provided in the Header.

SiteMain renders a main element, which should represent the dominant content of the body of a document. MainContentStart provides a target for SkipLink, which is often placed above the first element within MainContentStart.

BoundedContent can then be placed within the SiteMain.

The preview has been updated.

ReactVanilla

CopySharePrettify

<SiteContent>
  {/* Bookends Header here - renders SkipLink internally. Or render SkipLink similar to below */}
  <SkipLink>Skip to main content</SkipLink>
  {/* Ubik template OR user should set the SiteMain + MainContentStart */}
  <SiteMain>
    <MainContentStart />
    {/* A Banner can sit outside BoundedContent here */}
    <BoundedContent>Page content</BoundedContent>
    <BoundedContent>Page content</BoundedContent>
    <BoundedContent>Page content</BoundedContent>
  </SiteMain>
  {/* Bookends Footer here */}
</SiteContent>

<SiteContent> {/* Bookends Header here - renders SkipLink internally. Or render SkipLink similar to below */} <SkipLink>Skip to main content</SkipLink> {/* Ubik template OR user should set the SiteMain + MainContentStart */} <SiteMain> <MainContentStart /> {/* A Banner can sit outside BoundedContent here */} <BoundedContent>Page content</BoundedContent> <BoundedContent>Page content</BoundedContent> <BoundedContent>Page content</BoundedContent> </SiteMain> {/* Bookends Footer here */} </SiteContent>

CopySharePrettify

<div className="swan-site-content">
  {/* Bookends Header here - renders SkipLink internally. Or render SkipLink
  similar to below */}
  <a href="#maincontentstart" class="swan-skip-link"> Skip to main content </a>
  {/* Ubik template OR user should set the SiteMain + MainContentStart */}
  <main class="swan-site-main">
    <span id="maincontentstart" />
    {/* A Banner can sit outside BoundedContent here */}
    <div class="swan-bounded-content">Page content</div>
    <div class="swan-bounded-content">Page content</div>
    <div class="swan-bounded-content">Page content</div>
  </main>
  {/* Bookends Footer here */}
</div>

<div className="swan-site-content"> {/* Bookends Header here - renders SkipLink internally. Or render SkipLink similar to below */} <a href="#maincontentstart" class="swan-skip-link"> Skip to main content </a> {/* Ubik template OR user should set the SiteMain + MainContentStart */} <main class="swan-site-main"> <span id="maincontentstart" /> {/* A Banner can sit outside BoundedContent here */} <div class="swan-bounded-content">Page content</div> <div class="swan-bounded-content">Page content</div> <div class="swan-bounded-content">Page content</div> </main> {/* Bookends Footer here */} </div>

Ubik

For Ubik-powered pages, the template should handle rendering a SiteMain, with individual fragments using BoundedContent as appropriate.

In a future release, SWAN will remove styling from Page Wrapper components to better support multiple SWAN versions on one page.