Page Wrappers | Components

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:

ReactVanilla

<SiteContent>
  <SkipLink>Skip to main content</SkipLink>
  <header>
    <h1>header goes here</h1>
  </header>
  <SiteMain>
    <MainContentStart />
    <P>
      <code>MainContentStart</code> rendered here for accessibility support
    </P>
    <P>
      The layout also contains a hidden link{' '}
      <strong>`Skip to main content`</strong> which is accessible via keyboard
      to directly jump to main content. Play around by setting focus on the
      rendered portion (mouse click on the tab heading), and press `tab`
    </P>
    <Box p={2} bgc="accent">
      Unbounded page content does not need a BoundedContent wrapper
    </Box>
    <BoundedContent darkMode bgc="help" py={6}>
      Bounded page content goes inside of this wrapper
    </BoundedContent>
    <Box p={2} bgc="accent">
      You can have multiple unbounded sections.
    </Box>
    <BoundedContent darkMode bgc="help" py={6}>
      And can also add multiple bounded sections
    </BoundedContent>
  </SiteMain>
  <Box as="footer" mt={4}>
    footer goes here
  </Box>
</SiteContent>

<SiteContent>
  <SkipLink>Skip to main content</SkipLink>
  <header>
    <h1>header goes here</h1>
  </header>
  <SiteMain>
    <MainContentStart />
    <P>
      <code>MainContentStart</code> rendered here for accessibility support
    </P>
    <P>
      The layout also contains a hidden link{' '}
      <strong>`Skip to main content`</strong> which is accessible via keyboard
      to directly jump to main content. Play around by setting focus on the
      rendered portion (mouse click on the tab heading), and press `tab`
    </P>
    <Box p={2} bgc="accent">
      Unbounded page content does not need a BoundedContent wrapper
    </Box>
    <BoundedContent darkMode bgc="help" py={6}>
      Bounded page content goes inside of this wrapper
    </BoundedContent>
    <Box p={2} bgc="accent">
      You can have multiple unbounded sections.
    </Box>
    <BoundedContent darkMode bgc="help" py={6}>
      And can also add multiple bounded sections
    </BoundedContent>
  </SiteMain>
  <Box as="footer" mt={4}>
    footer goes here
  </Box>
</SiteContent>

<div class="swan-site-content">
  <a href="#maincontentstart" class="swan-skip-link">Skip to main content</a>
  <header><h1>header goes here</h1></header>
  <main class="swan-site-main">
    <span id="maincontentstart"></span>
    <p><code>MainContentStart</code> rendered here for accessibility support</p>
    <p>
      The layout also contains a hidden link
      <strong>`Skip to main content`</strong> which is accessible via keyboard
      to directly jump to main content. Play around by setting focus on the
      rendered portion (mouse click on the tab heading), and press `tab`
    </p>
    <div class="swan-p-2 swan-bgc-accent">
      Unbounded page content does not need a BoundedContent wrapper
    </div>
    <div class="swan-bounded-content swan-dark-mode swan-bgc-help swan-py-6">
      Bounded page content goes inside of this wrapper
    </div>
    <div class="swan-p-2 swan-bgc-accent">
      You can have multiple unbounded sections.
    </div>
    <div class="swan-bounded-content swan-dark-mode swan-bgc-help swan-py-6">
      And can also add multiple bounded sections
    </div>
  </main>
  <footer class="swan-mt-4">footer goes here</footer>
</div>

<div class="swan-site-content">
  <a href="#maincontentstart" class="swan-skip-link">Skip to main content</a>
  <header><h1>header goes here</h1></header>
  <main class="swan-site-main">
    <span id="maincontentstart"></span>
    <p><code>MainContentStart</code> rendered here for accessibility support</p>
    <p>
      The layout also contains a hidden link
      <strong>`Skip to main content`</strong> which is accessible via keyboard
      to directly jump to main content. Play around by setting focus on the
      rendered portion (mouse click on the tab heading), and press `tab`
    </p>
    <div class="swan-p-2 swan-bgc-accent">
      Unbounded page content does not need a BoundedContent wrapper
    </div>
    <div class="swan-bounded-content swan-dark-mode swan-bgc-help swan-py-6">
      Bounded page content goes inside of this wrapper
    </div>
    <div class="swan-p-2 swan-bgc-accent">
      You can have multiple unbounded sections.
    </div>
    <div class="swan-bounded-content swan-dark-mode swan-bgc-help swan-py-6">
      And can also add multiple bounded sections
    </div>
  </main>
  <footer class="swan-mt-4">footer goes here</footer>
</div>

jsxhtml

import {
  SiteMain,
  SiteContent,
  MainContentStart,
  BoundedContent,
  SkipLink,
} from '@vp/swan'
import * as React from 'react'

export const Layout: React.FC<unknown> = () => {
  return (
    <SiteContent>
      <SkipLink>Skip to main content</SkipLink>
      <header>Page Header & Navigation</header>
      <SiteMain>
        <MainContentStart />
        <BoundedContent>Your Site Content</BoundedContent>
      </SiteMain>
    </SiteContent>
  )
}

import {
  SiteMain,
  SiteContent,
  MainContentStart,
  BoundedContent,
  SkipLink,
} from '@vp/swan'
import * as React from 'react'

export const Layout: React.FC<unknown> = () => {
  return (
    <SiteContent>
      <SkipLink>Skip to main content</SkipLink>
      <header>Page Header & Navigation</header>
      <SiteMain>
        <MainContentStart />
        <BoundedContent>Your Site Content</BoundedContent>
      </SiteMain>
    </SiteContent>
  )
}

<div class="swan-site-content">
  <a href="#maincontentstart" class="swan-skip-link">Skip to main content</a>
  <header>header content</header>
  <main class="swan-site-main">
    <span id="maincontentstart"></span>
    <div class="swan-bounded-content">Bounded page content</div>
  </main>
  <footer>footer goes here</footer>
</div>

<div class="swan-site-content">
  <a href="#maincontentstart" class="swan-skip-link">Skip to main content</a>
  <header>header content</header>
  <main class="swan-site-main">
    <span id="maincontentstart"></span>
    <div class="swan-bounded-content">Bounded page content</div>
  </main>
  <footer>footer goes here</footer>
</div>

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.