Components
Wrap(SCSS)
Max-width wrappers for pages and components.
| Version: | 4.0.3 •View source•Changelog•Report issue | |
|---|---|---|
| Install: | yarn add @thumbtack/thumbprint-scss | |
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:
.my-component {@include tp-respond-above($tp-breakpoint__medium);}
Your page content goes here.
<div class="tp-wrap-snap ba b-green" className="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>