Content "bands"

The framework provides a system of bands (a visually separate stripe of content). These collectively provide the tools for doing most layout design. We strongly encourage developers to wrap their content sections into bands for optimal whitespace and visual clarity.

Have a look at our in-depth band examples and classes to see them in action.

These layout classes provide a general hierarchy for creating pages or sections:

<div class="wdn-band {options}">
    <div class="wdn-inner-wrapper">
        Content in here (grids, text, images, etc).
    </div>
</div>

Options

Bands can be configured with several pre-built options to change the background color, padding, and even restrict the width of text inside the band. In this section you will find details and links to examples about all of these options.

Text Band

The .wdn-text-band class can be applied to create a Text band. Text bands are used to constrain the contents of the band to 50rem or about 800px. This is helpful for text heavy bands in which you do not want the text to be full width.

<div class="wdn-band wdn-text-band">
    <div class="wdn-inner-wrapper">
        Content in here.
    </div>
</div>

Color options

The background color of bands can be changed by applying these classes to your band

• .wdn-light-triad-band
• .wdn-light-complement-band
• .wdn-light-neutral-band

<div class="wdn-band wdn-light-triad-band">
    <div class="wdn-inner-wrapper">
        Content in here (grids, text, images, etc).
    </div>
</div>

Vertical Padding Options for Bands

• .wdn-inner-padding-none
• .wdn-inner-padding-sm
• .wdn-inner-padding-lg
• .wdn-inner-padding-no-top
• .wdn-inner-padding-no-bottom

<div class="wdn-band">
    <div class="wdn-inner-wrapper wdn-inner-padding-none">
        Content in here (grids, text, images, etc).
    </div>
</div>