import { Wrapper } from "@progressiveui/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>
Use the props below to change the behaviour of the Wrapper component:
Use the pageWidth prop to set the width of the Wrapper component.
| Property | CSS Name | Value |
|---|---|---|
| 'xs' | .wfp--wrapper--width-xs | max-width: 500px; |
| 'sm' | .wfp--wrapper--width-sm | max-width: 700px; |
| 'md' | .wfp--wrapper--width-md | max-width: 1000px; |
| 'lg' | .wfp--wrapper--width-lg | max-width: 1200px; |
| 'full' | .wfp--wrapper--width-full | max-width: 100%; |
| 'narrow' | - | - |
| 'narrower' | - | - |
| 'narrowest' | - | - |
Use the mobilePageWidth prop to set the width of the Wrapper component on mobile devices.
'full' | 'lg' | 'md' | 'sm'
Use the spacing prop to add spacing to the top and bottom of the Wrapper component.
| Property | CSS Name | Value |
|---|---|---|
| md | .wfp--wrapper--spacing-md | padding-top: $spacing-05; padding-bottom: $spacing-05; |
| xl | .wfp--wrapper--spacing-xl | padding-top: $spacing-08; padding-bottom: $spacing-08; |
Use the background prop to set the background color of the Wrapper component.
| Property | CSS Name | Value |
|---|---|---|
| light | .wfp--wrapper--background-lighter | background: $layer-primary; |
| dark | .wfp--wrapper--background-dark | background: $background-brand; |