Content Band Documentation

Bands are used to separate pieces of content into sections, making it easier for a user to find specific information and to break-up the page. The bands also allow designers to be more creative when organizing content such as text with images.

Content band

Are used to layout content into sections. When used with the grid layout, designers can create professional presentations while maintaining the 960px width.

We have introduced minimal colors with the bands to create subtle visual separation. Apply any of these classes with the wdn-band class.


<div class="wdn-band wdn-light-neutral-band">
    <div class="wdn-inner-wrapper">
        Content in here.
Wide Horizon Image


wdn-stretch will set an element such as an image to full width or width:100%.

<div class="wdn-band ">
    <img class="wdn-stretch" src="../../graphics/wide-horizon.jpg" alt="Wide Horizon Image">

Additional Classes

We have included multiple classes to go with the wdn-inner-wrapper to adjust for padding.


<div class="wdn-band ">
    <div class="wdn-inner-wrapper wdn-inner-padding-sm">
        <p>CONTENT HERE</p>