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.

  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>

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>

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.