Campaign Box
The campaign box is meant to be used as an eye-catcher for a main product entry, such as the One-step Search on the home page.
Usage
Apply the campaign-box class to your container to make it a campaign box.
The padding within the border is slightly smaller on palm-sized devices to conserve space.
<div class="campaign-box">
<h1 class="font-xxl">Products!</h1>
<p>
Use this space for a product search, for a dynamic product entry or a teaser to it,
or for a vivid depiction of a Wolpertinger juggling tractor wheels while singing all
three acts of Wagner's <i>Die Meistersinger von Nürnberg</i>.
</p>
</div>
Products!
Use this space for a product search, for a dynamic product entry or a teaser to it, or for a vivid depiction of a Wolpertinger juggling tractor wheels while singing all three acts of Wagner's Die Meistersinger von Nürnberg.
State-specific Campaign Box
The campaign box can also be toggled depending on device state, so you can choose, for example, to show a campaign box on lap-sized and desktop devices, but not on palm-sized ones.
<div class="lap-campaign-box desk-campaign-box">
<h1 class="font-xxl">Heads Up</h1>
<p>
This content is enclosed in a campaign wrapper on medium to large devices.
On smaller ones, it is a regular old box of text to save space.
</p>
</div>
Heads Up
This content is enclosed in a campaign wrapper on medium to large devices. On smaller ones, it is a regular old box of text to save space.