# 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.