Wrap
Max-width wrappers for pages and components
Basic wrap
Basic wrapper with a max-width and side padding.
Your page content goes here.
<div class="tp-wrap ba b-green">Your page content goes here.</div>
Wrap snap
Deprecated
Wrappers that "snap" and the
tp-wrap-snap class are deprecated in favor of fluid wrappers.This provides a wrapper around content that "snaps" to fixed max-widths depending on the breakpoint. You can put any content in this wrapper.
The layout of the content inside the wrap-snap can be adjusted using the provide breakpoint mixins, for example:
Your page content goes here.
<div class="tp-wrap-snap ba b-green">Your page content goes here.</div>
Wrap bleed
In some cases you'll want the wrapper to be full width with no padding at mobile, that is, below the small breakpoint.
Wrap
Your page content goes here.
<div class="tp-wrap tp-wrap--bleed-below-small ba b-green">Your page content goes here.</div>
Wrap snap
Your page content goes here.
<div class="tp-wrap-snap tp-wrap--bleed-below-small ba b-green">Your page content goes here.</div>