Thumbprint logo

Wrap

Max-width wrappers for pages and components

Basic wrap

Basic wrapper with a max-width and side padding.

Wrap with no bleed

<Wrap>
  <div className="ba b-green">
    Hello
  </div>
</Wrap>

Wrap bleed
In some cases you'll want the wrapper to be full width with no padding on smaller screens, below a certain breakpoint.
Wrap with bleed below medium
<Wrap bleedBelow="medium">
  <div className="ba b-green">
    Hello
  </div>
</Wrap>

Props
Wrap
  • children
    Component to be wrapped.
    

    Type
    React.ReactNode
  • bleedBelow
    Breakpoint at which the wrapper should remove horizontal margin to bleed to the edge of the
viewport. Defaults to undefined, in which case it never does this.
    

    Type
    'small' | 'medium' | 'large'
  • dataTestId
    A selector to hook into the React component for use in automated testing environments.
    

    Type
    string
  • dataTest
    deprecated
    A selector to hook into the React component for use in automated testing environments.
    

    Note: 
    Deprecated in favor of the dataTestId prop
    

    Type
    string