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. In combination with the grid classes, designers can easily build responsive layouts (see breakpoints) on their sites.
This page contains information about background colors, padding options, grid layout, sample layouts, and campus map embeds for helping developing pages using the UNL Framework.
Background Colors
Subtle background colors can be used to create visual separation. Apply any of these classes along with the dcf-bleed class to create a horizontal background fill that spans the entire width of the viewport.
Click or tap on each of the adjacent classes to view the background colors on this band.
<div class="dcf-bleed dcf-wrapper unl-bg-lighter-gray">
Content goes here.
</div>
Padding Options
The dcf-wrapper class applies padding only on left and right sides. Use the provided utility classes to add padding to the top and/or bottom of the wrapper as needed.
While this example applies an equal amount of padding to the top and bottom of the wrapper, padding utilities of different sizes can be mixed. Click or tap on the adjacent classes to view the change in vertical padding.
<div class="dcf-bleed">
<div class="dcf-wrapper dcf-pt-8 dcf-pb-8">
<Content goes here.>
</div>
</div>
Grid Layout
For more information on responsive grid layout control, see DCF breakpoint documentation.
Grid Layout Halves @md
First Column
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 ActionSecond Column
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
<div class="dcf-bleed dcf-wrapper dcf-pt-8 dcf-pb-8 unl-bg-lighter-gray">
<h3 class="dcf-mb-4">Grid Layout Halves @md</h3>
<div class="dcf-grid-halves@md dcf-col-gap-vw dcf-row-gap-5">
<div>
<h4 class="dcf-regular">First Column</h4>
<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="https://wdn.unl.edu/" class="dcf-btn dcf-btn-primary">Call to Action</a>
</div>
<div>
<h4 class="dcf-regular">Second Column</h4>
<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="https://wdn.unl.edu/" class="dcf-btn dcf-btn-primary">Call to Action</a>
</div>
</div>
</div>
Grid Layout Thirds @md
First Column
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 ActionSecond Column
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 ActionThird Column
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
<div class="dcf-bleed dcf-wrapper dcf-pt-8 dcf-pb-8">
<h3 class="dcf-mb-4">Grid Layout Thirds @md</h3>
<div class="dcf-grid-thirds@md dcf-col-gap-vw dcf-row-gap-5">
<div>
<h4 class="dcf-regular">First Column</h4>
<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="https://wdn.unl.edu/" class="dcf-btn dcf-btn-primary">Call to Action</a>
</div>
<div>
<h4 class="dcf-regular">Second Column</h4>
<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="https://wdn.unl.edu/" class="dcf-btn dcf-btn-primary">Call to Action</a>
</div>
<div>
<h4 class="dcf-regular">Third Column</h4>
<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="https://wdn.unl.edu/" class="dcf-btn dcf-btn-primary">Call to Action</a>
</div>
</div>
</div>
Grid Layout Halves at @sm, Fourths @lg
First Column
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.
Second Column
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.
Third Column
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.
Fourth Column
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.
<div class="dcf-bleed dcf-wrapper dcf-pt-8 dcf-pb-8 unl-bg-lighter-gray">
<h3 class="dcf-mb-4">Grid Layout Halves at @sm, Fourths @lg</h3>
<div class="dcf-grid-halves@sm dcf-grid-fourths@lg dcf-col-gap-vw dcf-row-gap-5">
<div>
<h4 class="dcf-regular">First Column</h4>
<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>
</div>
<div>
<h4 class="dcf-regular">Second Column</h4>
<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>
</div>
<div>
<h4 class="dcf-regular">Third Column</h4>
<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>
</div>
<div>
<h4 class="dcf-regular">Fourth Column</h4>
<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>
</div>
</div>
</div>
Six Box Grid Layout Halves @sm, Thirds @lg
First Box
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.
Second Box
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.
Third Box
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.
Fourth Box
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.
Fifth Box
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.
Sixth Box
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.
<div class="dcf-bleed dcf-wrapper dcf-pt-8 dcf-pb-8">
<h3 class="dcf-mb-4">Six Box Grid Layout Halves @sm, Thirds @lg</h3>
<div class="dcf-grid-halves@sm dcf-grid-thirds@lg dcf-col-gap-vw dcf-row-gap-5">
<div>
<h4 class="dcf-regular">First Box</h4>
<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>
</div>
<div>
<h4 class="dcf-regular">Second Box</h4>
<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>
</div>
<div>
<h4 class="dcf-regular">Third Box</h4>
<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>
</div>
<div>
<h4 class="dcf-regular">Fourth Box</h4>
<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>
</div>
<div>
<h4 class="dcf-regular">Fifth Box</h4>
<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>
</div>
<div>
<h4 class="dcf-regular">Sixth Box</h4>
<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>
</div>
</div>
</div>
Sample Layouts
Sample Layout: Photo Right on Wide Screen, 67%/33%
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
<div class="dcf-bleed dcf-wrapper dcf-pt-8 dcf-pb-8 unl-bg-lighter-gray">
<div class="dcf-grid dcf-col-gap-vw dcf-row-gap-5">
<div class="dcf-col-100% dcf-col-33%-end@md dcf-2nd@md">
<img class="dcf-d-block unl-frame-quad" src="images/documentation/dcf-bands-basketball-crowd.jpg" alt="Crowd cheers at Husker Basketball game.">
</div>
<div class="dcf-col-100% dcf-col-67%-start@md dcf-1st@md">
<h3 class="dcf-regular">Sample Layout: Photo Right on Wide Screen, 67%/33%</h3>
<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="https://wdn.unl.edu/resources/bands" class="dcf-btn dcf-btn-primary">Call to Action</a>
</div>
</div>
</div>
Sample Layout: Photo Left on Wide Screen, 33%/67%
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
<div class="dcf-bleed dcf-wrapper dcf-pt-8 dcf-pb-8">
<div class="dcf-grid dcf-col-gap-vw dcf-row-gap-5">
<div class="dcf-col-100% dcf-col-33%-start@md">
<img class="dcf-d-block unl-frame-quad" src="images/documentation/dcf-bands-basketball-halftime.jpg" alt="Cheerleaders perform at halftime of basketball game.">
</div>
<div class="dcf-col-100% dcf-col-67%-end@md">
<h3 class="dcf-regular">Sample Layout: Photo Left on Wide Screen, 33%/67%</h3>
<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="https://wdn.unl.edu/resources/bands" class="dcf-btn dcf-btn-primary">Call to Action</a>
</div>
</div>
</div>
Sample Layout: Map Embed Right on Wide Screen, 50%/50%
Husker Hub Office
Room 130
Louise Pound Hall
huskerhub@unl.edu
402-472-2030
Office hours: Weekdays, 8 a.m. to 5 p.m.
<div class="dcf-bleed dcf-wrapper unl-bg-lighter-gray dcf-pt-8 dcf-pb-8">
<div class="dcf-grid dcf-col-gap-vw dcf-row-gap-5">
<div class="dcf-col-100% dcf-col-50%-end@md dcf-2nd@md dcf-ratio dcf-ratio-16x9">
<iframe src="https://maps.unl.edu/embed/LPH" title="Louise Pound Hall Map Embed" class="dcf-ratio-child dcf-w-100% dcf-h-100% dcf-b-0"></iframe>
</div>
<div class="dcf-col-100% dcf-col-50%-start@md dcf-1st@md">
<h3 class="dcf-regular">Sample Layout: Map Embed Right on Wide Screen, 50%/50%</h3>
<h4 class="dcf-regular">Husker Hub Office</h4>
<p>Room 130<br />
Louise Pound Hall<br />
<a href="mailto:huskerhub@unl.edu">mailto:huskerhub@unl.edu</a><br />
402-472-2030<br />
<strong>Office Hours</strong>:Weekdays, 8 a.m. to 5 p.m.</p>
</div>
</div>
</div>
Centered text in XL width div
Text you want centered. Text you want centered. Text you want centered. Text you want centered. Text you want centered. Text you want centered. Text you want centered.
<div class="dcf-bleed dcf-wrapper dcf-pt-8 dcf-pb-8">
<div class="dcf-d-flex dcf-jc-center">
<div class="dcf-w-max-xl dcf-txt-center">
<h3 class="dcf-regular">Centered text in XL width div</h3>
<p>Text you want centered. Text you want centered. Text you want centered. Text you want centered. Text you want centered. Text you want centered. Text you want centered.</p>
</div>
</div>
</div>