2 Layouts

2.1 Grid system

A robust grid system will allow us to customize the layout composition for components in various ways on different device screen sizes. Columns will be percentage-based and we’ll work with consistent margins and variable gutters.

2.1.1 Smartphone

%
%

2.1.2 Tablet

%
%
%
%
%
%

2.1.3 Desktop

%
%
%
%
%
%
%
%
%
%
%
%

2.2 Layouts

A robust grid system will allow us to customize the layout composition for components in various ways on different device screen sizes. Columns will be percentage-based and we’ll work with consistent margins and variable gutters.

2.2.1 Article Only

Smartphone

2

Tablet

6

Desktop

12

2.2.2 Article + Sidebar

2.2.3 Article + 2 Sidebars

Smartphone

2
2
2

Tablet

4
2
6

Desktop

6
3
3

2.3 Header

Every page will contain a header. It consists of a configurable Topical Area and a persistent Enterprise Area.

2.3.1 Header Navigation

<div class="header-container">
  <header class="group">
    <div class="utility-wrapper wrapper">
      <div class="header-search">
        <div class="search">
          <form>
            <input type="search" placeholder="Search..." />
            <input type="submit" value="" /><span class="icon-search" aria-hidden="true"></span>
          </form>
          <div class="popular">
            <h3>Popular Searches on ncdcr.gov:</h3>
            <ul class="trending">
              <li><a href="#">Historical Newspapers</a></li>
              <li><a href="#">Shop NC Art</a></li>
              <li><a href="#">Raleigh Exhibits</a></li>
              <li><a href="#">History Museum</a></li>
              <li><a href="#">Blackbeard</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="alert-widget">
        <button>
          <span class="icon-notifications" aria-hidden="true"></span>
          <div class="alert-count">2</div>
        </button>
      </div>
    </div>
    <div class="mobile-nav">
      <button class="flyout-trigger open-trigger"><span class="icon-dehaze" aria-hidden="true"></span><span> Menu</span></button>
      <h1 class="site-title"><a href="/" rel="home" title="NC DCR Home">NC DCR</a></h1>
      <button class="search-trigger"><span>Search </span><span class="icon-search" aria-hidden="true"></span></button>
    </div>
    <div class="flyout-panel menu-container mainMenu" id="mainMenu">
      <div aria-label="First level" class="">
        <button href="#" class="flyout-trigger close-trigger" aria-hidden="true"><span class="icon-close" aria-hidden="true"></span><span>Close Menu</span></button>
        <nav class="topical-nav " role="navigation" aria-label="Topical Navigation">
          <ul class="wrapper">
            <li class="home"><a href="#"><span>Home</span></a></li>
            <li class="has-mega has-dropdown">
              <a href="#">About <span class="icon-chevron-right" aria-hidden="true"></span></a>
              <div aria-label="Second level">
                <a href="#" class="parent-title wrapper">About</a>
                <ul class="wrapper">
                  <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Thirdlevel">
                      <span class="parent-title" aria-hidden="true">Level 2 Link Name</span>
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Thirdlevel">
                      <span class="parent-title" aria-hidden="true">Level 2 Link Name</span>
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Thirdlevel">
                      <span class="parent-title" aria-hidden="true">Level 2 Link Name</span>
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Thirdlevel">
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                      </ul>
                    </div>
                  </li>
                  <!-- <li class="promo"><a href="#"><img src="http://placehold.it/150x100"></a><a href="#">Promotional Graphic Link</a><p>Text here</p></li>
                  <li class="promo"><img src="http://placehold.it/150x100"></li> -->
                </ul>
              </div>
            </li>
            <li class="expanded has-dropdown"><a href="#">Education <span class="icon-chevron-right" aria-hidden="true"></span></a>
              <div aria-label="Second level">
                <span class="parent-title" aria-hidden="true">About</span>
                <ul>
                  <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                  <li><a href="#">Overview</a></li>
                  <li><a href="#">Our Divisions</a></li>
                  <li>
                    <a href="#">Leadership Team <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Third level">
                      <span class="parent-title">Leadership Team</span>
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Contact</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">News</a></li>
          </ul>
        </nav>
        <nav class="enterprise-nav" role="navigation" aria-label="Enterprise Navigation">
          <ul class="wrapper">
            <li><a href="#" title="NC Gov"><span class="icon-nc-brand" aria-hidden="true"></span><span>NC.Gov</span></a></li>
            <li><a href="#" title="Agencies"><span class="icon-account-balance" aria-hidden="true"></span><span>Agencies</span></a></li>
            <li><a href="#" title="Jobs"><span class="icon-wallet-travel" aria-hidden="true"></span><span>Jobs</span></a></li>
            <li><a href="#" title="Services"><span class="icon-phonelink" aria-hidden="true"></span><span>Services</span></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

2.3.2 Header Navigation - Mega Menu

<div class="header-container">
  <header class="group">
    <div class="utility-wrapper wrapper">
      <div class="header-search">
        <div class="search">
          <form>
            <input type="search" placeholder="Search..." />
            <input type="submit" value="" /><span class="icon-search" aria-hidden="true"></span>
          </form>
          <div class="popular">
            <h3>Popular Searches on ncdcr.gov:</h3>
            <ul class="trending">
              <li><a href="#">Historical Newspapers</a></li>
              <li><a href="#">Shop NC Art</a></li>
              <li><a href="#">Raleigh Exhibits</a></li>
              <li><a href="#">History Museum</a></li>
              <li><a href="#">Blackbeard</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="alert-widget">
        <button>
          <span class="icon-notifications" aria-hidden="true"></span>
          <div class="alert-count">2</div>
        </button>
      </div>
    </div>
    <div class="mobile-nav">
      <button class="flyout-trigger open-trigger"><span class="icon-dehaze" aria-hidden="true"></span><span> Menu</span></button>
      <h1 class="site-title"><a href="/" rel="home" title="NC DCR Home">NC DCR</a></h1>
      <button class="search-trigger"><span>Search </span><span class="icon-search" aria-hidden="true"></span></button>
    </div>
    <div class="flyout-panel menu-container mainMenu" id="mainMenu">
      <div aria-label="First level" class="">
        <button href="#" class="flyout-trigger close-trigger" aria-hidden="true"><span class="icon-close" aria-hidden="true"></span><span>Close Menu</span></button>
        <nav class="topical-nav " role="navigation" aria-label="Topical Navigation">
          <ul class="wrapper">
            <li class="home"><a href="#">Home</a></li>
            <li class="has-mega has-dropdown">
              <a href="#">About <span class="icon-chevron-right" aria-hidden="true"></span></a>
              <div aria-label="Second level">
                <a href="#" class="parent-title wrapper">About</a>
                <ul class="wrapper">
                  <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Thirdlevel">
                      <span class="parent-title" aria-hidden="true">Level 2 Link Name</span>
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Thirdlevel">
                      <span class="parent-title" aria-hidden="true">Level 2 Link Name</span>
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Thirdlevel">
                      <span class="parent-title" aria-hidden="true">Level 2 Link Name</span>
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Thirdlevel">
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Level 3 Link Name</a></li>
                      </ul>
                    </div>
                  </li>
                  <!-- <li class="promo"><a href="#"><img src="http://placehold.it/150x100"></a><a href="#">Promotional Graphic Link</a><p>Text here</p></li>
                  <li class="promo"><img src="http://placehold.it/150x100"></li> -->
                </ul>
              </div>
            </li>
            <li class="expanded has-dropdown"><a href="#">Education <span class="icon-chevron-right" aria-hidden="true"></span></a>
              <div aria-label="Second level">
                <span class="parent-title" aria-hidden="true">About</span>
                <ul>
                  <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                  <li><a href="#">Overview</a></li>
                  <li><a href="#">Our Divisions</a></li>
                  <li>
                    <a href="#">Leadership Team <span class="icon-chevron-right" aria-hidden="true"></span></a>
                    <div aria-label="Third level">
                      <span class="parent-title">Leadership Team</span>
                      <ul>
                        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Contact</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">News</a></li>
          </ul>
        </nav>
        <nav class="enterprise-nav" role="navigation" aria-label="Enterprise Navigation">
          <ul class="wrapper">
            <li><a href="#" title="NC Gov"><span class="icon-nc-brand" aria-hidden="true"></span><span>NC.Gov</span></a></li>
            <li><a href="#" title="Agencies"><span class="icon-account-balance" aria-hidden="true"></span><span>Agencies</span></a></li>
            <li><a href="#" title="Jobs"><span class="icon-wallet-travel" aria-hidden="true"></span><span>Jobs</span></a></li>
            <li><a href="#" title="Services"><span class="icon-phonelink" aria-hidden="true"></span><span>Services</span></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

2.4 Footer

Every page will contain a footer. It consists of a configurable Topical Area and a persistent Enterprise Area. Topical area must include the contact section. Up to 3 additional sections may be included in this area, such as social media links.

2.4.1 Footer Navigation

<div class="footer-container">
  <footer class="group">
    <section class="band theme-core-blue topical">
      <div class="wrapper">
        <section class="parts-span-third">
          <section class="contact inverted group">
            <h3 class="section-title border">Information</h3>
            <div itemscope itemtype="http://schema.org/Organization">
              <span itemprop="name">North Carolina Department of Cultural Resources</span>
              <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                <span itemprop="streetAddress">301 N. Wilmington Street</span>,
                <span itemprop="addressLocality">Raleigh</span>,
                <span itemprop="addressRegion">NC</span>
                <span itemprop="postalCode">27601-1058</span>
              </div>
              <span itemprop="telephone">(919) 807-7300</span>
            </div>
          </section>
          <section class="feed tweets">
            <h3 class="section-title">Recent Tweets</h3>
            <ol>
              <li class="icon-twitter" itemscope itemtype="http://schema.org/UserTweets">
                <header>
                  <a href="" itemprop="name url">Pat McCrory</a>
                  <span itemprop="alternateName">@PatMcCroryNC</span> &bull; <span itemprop="startDate">14h</span>
                </header>
                <div itemprop="description"><a href="#">@Butterball</a> and Shalag US are brining more jobs to our state. Read about this and more in this week's newsletter&hellip;</div>
              </li>
              <li class="icon-twitter" itemscope itemtype="http://schema.org/UserTweets">
                <header>
                  <a href="" itemprop="name url">Pat McCrory</a>
                  <span itemprop="alternateName">@PatMcCroryNC</span> &bull; <span itemprop="startDate">14h</span>
                </header>
                <div itemprop="description"><a href="#">@Butterball</a> and Shalag US are brining more jobs to our state. Read about this and more in this week's newsletter&hellip;</div>
              </li>
            </ol>
          </section>
          <section class="social-links">
            <h3 class="section-title border">Follow Us</h3>
            <ul>
              <li>
                <a href="http://www.facebook.com/example">
                  <span class="icon-facebook" aria-hidden="true"></span> <span>Facebook</span>
                </a>
              </li>
              <li>
                <a href="http://www.twitter.com/example">
                  <span class="icon-twitter" aria-hidden="true"></span> <span>Twitter</span>
                </a>
              </li>
              <li>
                <a href="http://www.youtube.com/example">
                  <span class="icon-youtube" aria-hidden="true"></span> <span>YouTube</span>
                </a>
              </li>
              <li>
                <a href="http://www.example.com/feed">
                  <span class="icon-feed" aria-hidden="true"></span> <span>RSS Feed</span>
                </a>
              </li>
            </ul>
          </section>
        </section>
      </div>
    </section>
    <section class="band theme-core-blue pad-small enterprise">
      <div class="wrapper">
        <section>
          <nav>
            <ul class="group">
              <li>
                <a href="#" title="NC.GOV Home">
                  <span>NC.GOV Home</span> <span class="icon-chevron-right" aria-hidden="true"></span>
                </a>
              </li>
              <li>
                <a href="#" title="Employee Directory">
                  <span>Employee Directory</span> <span class="icon-chevron-right" aria-hidden="true"></span>
                </a>
              </li>
              <li>
                <a href="#" title="Help and Support">
                  <span>Help &amp; Support</span> <span class="icon-chevron-right" aria-hidden="true"></span>
                </a>
              </li>
              <li>
                <a href="#" title="Accessibility">
                  <span>Accessibility</span> <span class="icon-chevron-right" aria-hidden="true"></span>
                </a>
              </li>
              <li>
                <a href="#" title="Terms of Use">
                  <span>Terms of Use</span> <span class="icon-chevron-right" aria-hidden="true"></span>
                </a>
              </li>
              <li>
                <a href="#" title="Privacy Policy">
                  <span>Privacy Policy</span> <span class="icon-chevron-right" aria-hidden="true"></span>
                </a>
              </li>
            </ul>
          </nav>
          <div class="brand">
            <a href="http://www.nc.gov" title="NC.GOV Home"><img src="../img/l_nc-brand-footer.svg" alt="Nothing Compares. North Carolina"/></a>
          </div>
        </section>
      </div>
    </section>
  </footer>
</div>

2.5 Content

Content area specific style.

2.5.1 Page Title

Page Title

<h1 class="page-title">Page Title</h1>

2.5.2 Section Title

Section Title

<h1 class="section-title">Section Title</h1>

2.5.3 Alignments

You can align content in multiple ways. Good for wrapping text around objects, such as images.

2.5.3.1 Align Left

Wrap content to the right of the object.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<img class="alignleft" src="http://placehold.it/350x150">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

2.5.3.2 Align Center

Break content before and after the object. Object is centered.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<img class="aligncenter" src="http://placehold.it/350x150">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

2.5.3.3 Align Right

Wrap content to the left of the object.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<img class="alignright" src="http://placehold.it/350x150">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

2.6 Bands

Full-width containers that can be used to display grouped content blocks. Bands have 3 configurations: Theme, Pad, and Parts.

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-core-black

Core Black background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-core-blue

Core Blue background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-core-gray

Core Gray background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-core-light-gray

Core Light Gray background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-core-off-white

Core Off White background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-cool-gray

Accent Cool Gray background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-warm-gray

Accent Warm Gray background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-light-blue

Accent Light Blue background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-blue

Accent Blue background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-indigo

Accent Indigo background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-deep-purple

Accent Deep Purple background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-purple

Accent Purple background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-red

Accent Red background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-orange

Accent Orange background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-olive

Accent Olive background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-green

Accent Green background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.theme-accent-turquoise

Accent Turquoise background

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band {$modifiers}">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Band Title</h1>
    </header>
    <section>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.1 Background Image

Bands that use a background image for its theme. For accessibility purposes, use a theme color in case images are disabled. Images will adjust to the size of the band.

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.full-bleed

Allows image to fill the container

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-black {$modifiers}" style="background-image: url(../img/sample.jpg);">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Band Title</h1>
    </header>
    <section>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.2 Padding

Bands can use various padding configurations for spacing purposes.

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.pad-none

No top/bottom padding

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.pad-small

30px top/bottom padding

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.pad-large

120px top/bottom padding

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.pad-top

60px top padding only

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.pad-top-large

120px top padding only

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.pad-bottom

60px bottom padding only

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
.pad-bottom-large

120px bottom padding only

Band Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray {$modifiers}">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Band Title</h1>
    </header>
    <section>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.3 Header

Band header classes that configure various sizes.

Band Title

.parts-span-half

One-Half

Band Title

.parts-span-third

One-Third

Band Title

.parts-span-fourth

One-Fourth

Band Title

.parts-span-half.shifted

One-Half (Shifted)

Band Title

.parts-span-two-third

Two-Third

Band Title

.parts-span-two-third.shifted

Two-Third (Shifted)

Band Title

<section class="band theme-core-gray">
  <div class="wrapper">
    <header class="{$modifiers}">
      <h1 class="section-title">Band Title</h1>
    </header>
  </div>
</section>

2.6.4 Full

Full Width (Default)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Full Width (Default)</h1>
    </header>
    <section>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.5 One-Half

Span Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Span Half</h1>
    </header>
    <section class="parts-span-half">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.6 One-Third

Span Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Span Third</h1>
    </header>
    <section class="parts-span-third">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.7 One-Fourth

Span Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Span Fourth</h1>
    </header>
    <section class="parts-span-fourth">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.8 One-Half (1 Part)

Span Half (1 Part)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Span Half (1 Part)</h1>
    </header>
    <section class="parts-span-half">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.9 One-Half (Shifted)

Span Half (1 Part - Shifted)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Span Half (1 Part - Shifted)</h1>
    </header>
    <section class="parts-span-half shifted">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.10 Two-Third

Span Two Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Span Two Third</h1>
    </header>
    <section class="parts-span-two-third">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.11 Two-Third (Reverse)

Span Two Third (Reverse)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Span Two Third (Reverse)</h1>
    </header>
    <section class="parts-span-two-third reverse">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.12 Two-Third (1 Part)

Span Two Third (1 Part)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Span Two Third (1 Part)</h1>
    </header>
    <section class="parts-span-two-third">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.6.13 Two-Third (Shifted)

Span Two Third (1 Part - Shifted)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.
<section class="band theme-core-gray">
  <div class="wrapper">
    <header>
      <h1 class="section-title">Span Two Third (1 Part - Shifted)</h1>
    </header>
    <section class="parts-span-two-third shifted">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sem blandit, ultrices quam vel, maximus ipsum. Nulla ipsum arcu, lacinia vitae finibus at, ultricies vitae turpis. Donec eu porta risus. Vestibulum tristique mollis dui ut eleifend. Aliquam bibendum dignissim pellentesque.</div>
    </section>
  </div>
</section>

2.7 Templates

Templates consist mostly of groups of components stitched together to form reusable pages.

2.7.1 Home

2.7.2 Search

2.7.3 Document Collection

2.7.4 Events

2.7.5 People

2.7.6 Page

2.7.6.1 Page Templates - NC Governor

2.7.6.2 Page Templates - NC DCR

2.7.6.3 Page Templates - NC DHHS

2.7.6.4 Page Templates - NC OITS

2.7.6.5 Page Templates - NC OSHR

2.7.6.6 Page Templates - NC OSBM

2.7.6.7 Page Templates - NC DENR

2.7.6.8 Page Templates - NC DPS

2.7.6.9 Page Templates - NC DOA

2.7.7 404 - Not Found

2.7.8 Media Gallery

2.7.9 Agency Directory

2.7.10 Services

2.7.11 Contact

2.7.12 Employee Directory

2.7.12 News/Blog