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.