Wrapper

Import statement

import { Wrapper } from "@wfp/react"

Here’s a basic example of how to use the Wrapper:

<Wrapper pageWidth="md">This is the content.</Wrapper>

In this example, the Wrapper displays a message "This is the content." with an optional custom CSS class custom-class, an id wrapper-id, and sets the page width for the inner Wrapper component to lg (large).

<Wrapper id="wrapper-id" className="custom-class" pageWidth="lg">
  This is the content.
</Wrapper>

Props

Use the props below to change the behaviour of the Wrapper component:

pageWidth

Use the pageWidth prop to set the width of the Wrapper component.

mobilePageWidth

Use the mobilePageWidth prop to set the width of the Wrapper component on mobile devices.

'full' | 'lg' | 'md' | 'sm'

spacing

Use the spacing prop to add spacing to the top and bottom of the Wrapper component.

background

Use the background prop to set the background colour of the Wrapper component.