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.

wdn-light-triad-band
wdn-light-complement-band
wdn-light-neutral-band

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

"WDN-STRETCH"

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">
</div>

Vertical Padding Options for Bands

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

  • 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-sm">
        <p>CONTENT HERE</p>
    </div>
</div>
The band performs at a Nebraska basketball game.

Sample Layout (Photo Right)

Integer porttitor eleifend rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam est sem, semper in pretium fermentum, vestibulum a lectus. Sed non metus non nisl vulputate sodales. Nullam eget dictum leo, ut consectetur dolor. Morbi tempor rutrum mi, a euismod enim viverra gravida.

Call to Action
<section class="wdn-band wdn-light-neutral-band">
    <div class="wdn-inner-wrapper wdn-inner-padding-lg">
        <div class="bp2-wdn-grid-set-halves">
            <div class="wdn-col">
                <div class="wdn-grid-set">
                    <div class="bp2-wdn-col-six-sevenths bp3-wdn-col-full wdn-pull-right">
                        <figure class="wdn-frame clear-top">
                            <img src="images/140109_NU_Michigan-12pg" alt="The band performs at a Nebraska basketball game." />
                        </figure>
                    </div>
                </div>
            </div>
            <div class="wdn-col">
                <div class="wdn-grid-set">
                    <div class="bp3-wdn-col-six-sevenths">
                        <h2 class="wdn-brand clear-top">Sample Layout (Photo Right)</h2>
                        <p>Integer porttitor eleifend rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam est sem, semper in pretium fermentum, vestibulum a lectus. Sed non metus non nisl vulputate sodales. Nullam eget dictum leo, ut consectetur dolor. Morbi tempor rutrum mi, a euismod enim viverra gravida.</p>
                        <a href="http://wdn.unl.edu/resources/bands" class="wdn-button">Call to Action</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
The band performs at a Nebraska basketball game.

Sample Layout (Photo Left)

Praesent eget magna lectus. Integer imperdiet tellus at diam ultrices condimentum. Pellentesque ut nulla sit amet turpis vestibulum aliquet vitae feugiat erat. Sed ornare purus sed urna rutrum volutpat. Etiam quis risus sem. Vivamus non sapien rutrum massa posuere mattis.

Call to Action
<section class="wdn-band wdn-light-neutral-band">
    <div class="wdn-inner-wrapper wdn-inner-padding-lg">
        <div class="bp2-wdn-grid-set-halves">
            <div class="wdn-col">
                <div class="wdn-grid-set">
                    <div class="bp2-wdn-col-six-sevenths bp3-wdn-col-full">
                        <figure class="wdn-frame clear-top">
                            <img src="images/140109_NU_Michigan-1.jpg" alt="The band performs at a Nebraska basketball game." />
                        </figure>
                    </div>
                </div>
            </div>
            <div class="wdn-col">
                <div class="wdn-grid-set">
                    <div class="bp3-wdn-col-six-sevenths wdn-pull-right">
                        <h2 class="wdn-brand clear-top">Sample Layout (Photo Left)</h2>
                        <p>Praesent eget magna lectus. Integer imperdiet tellus at diam ultrices condimentum. Pellentesque ut nulla sit amet turpis vestibulum aliquet vitae feugiat erat. Sed ornare purus sed urna rutrum volutpat. Etiam quis risus sem. Vivamus non sapien rutrum massa posuere mattis.</p>
                        <a href="http://wdn.unl.edu/resources/bands" class="wdn-button">Call to Action</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>