Components
Structure
Wrapper

Wrapper

Wrapper

Editable Example

import { Wrapper } from "@wfp/react";

() => {
  return (
    <Wrapper>
      Democratic Republic of Congo (DRC), claiming
      countless lives and causing massive displacement.
    </Wrapper>
  );
};
PropDefaultDescriptionValue

pageWidth

"sm" |"md" |"lg" |"full" |"xs" |"narrow" |"narrower" |"narrowest"
–

Defines the width of the wrapper. Can be one of 'xs', 'sm', 'md', 'lg', 'full', 'narrow', 'narrower', or 'narrowest'.

mobilePageWidth

ScreenSize
–

Specifies the page width for mobile devices. It uses the ScreenSize type.

spacing

"md" |"xl"
–

Determines the spacing around the wrapper. Can be 'md' for medium or 'xl' for extra large.

background

"lighter" |"dark"
–

Sets the background theme. Can be 'lighter' for a light background or 'dark' for a dark background.

className

string
–

Additional CSS class names to be applied to the wrapper.

backgroundClassName

string
–

CSS class names specifically for the background of the wrapper.

backgroundStyle

CSSProperties
–

Custom CSS properties for the background styling.

On this page

References