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.

Deprecated

This feature is deprecated and will be removed in a future release.

  1. Usage
  2. State-specific Campaign Box

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.

A campaign box
<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>
<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.

An element that is a campaign box on large devices, but not on small 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>
<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.