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.3.3 Header Navigation - Alt Theme One

<div class="header-container header-alt-one">
      <header class="group wrapper">
        <div class="header-search header-search-alt-one">
          <div class="search">
            <div class="search-wrapper">
              <form>
                <input type="search" placeholder="Search..." />
                <input type="submit" value="" /><span class="icon-search" aria-hidden="true"></span>
              </form>
            </div>
            <button class="search-toggle" id="searchToggle"><span class="icon-search" aria-hidden="true"></span></button>
          </div>
        </div>
        <div class="mobile-nav">
          <a href="/" rel="home" title="NC DCR Home" class="site-title">
            <img src="../img/l_museum-natural-sciences.png"/>
          </a>
          <button class="search-trigger"><span>Search </span><span class="icon-search" aria-hidden="true"></span></button>
          <button class="flyout-trigger open-trigger"><span class="icon-dehaze" aria-hidden="true"></span><span> Menu</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-alt-one" 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="#">Places to Go <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  <div aria-label="Second level">
                    <a href="#" class="parent-title wrapper">Places to Go</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>
                  <div class="mega-custom">
                    <div class="mega-custom-wrapper">
                      <div class="span-one mega-custom-card">
                        <img src="https://placekitten.com/g/286/160"/>
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research &amp; Fields of Fact</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                      </div>
                      <div class="span-one mega-custom-card">
                        <img src="https://placekitten.com/g/286/160"/>
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research &amp; Fields of Fact &amp; Fields of Fiction</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                      </div>
                      <div class="span-one mega-custom-card">
                        <img src="https://placekitten.com/g/286/160"/>
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                      </div>
                      <div class="span-one mega-custom-card">
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                        </ul>
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="has-mega has-dropdown"><a href="#">Things to Do <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  <div aria-label="Second level">
                    <span class="parent-title" aria-hidden="true">Things to Do</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>
                  <div class="mega-custom">
                    <div class="mega-custom-wrapper">
                      <div class="span-one mega-custom-card">
                        <img src="https://placekitten.com/g/286/370"/>
                      </div>
                      <div class="span-one mega-custom-card">
                        <h2 class="mega-custom-parent-title">Collections</h2>
                        <p class="mega-custom-card-meta">Research at the Astronomy &amp; Astrophysics Research Lab (AARL) spans from understanding the early solar system and our own beginnings to the origin of galaxies in the Universe.</p>
                        <ul >
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                      </div>
                      <div class="span-one mega-custom-card">
                        <img src="https://placekitten.com/g/286/160"/>
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                      </div>
                      <div class="span-one mega-custom-card">
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                        <ul>
                          <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="has-dropdown">
                  <a href="#">Education <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  <div aria-label="Second level">
                    <a href="#" class="parent-title wrapper">Education</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>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name &amp; Link Name &amp; Link Name<span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name &amp; Link Name &amp; Link Name<span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                      <li>
                        <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="has-mega has-dropdown"><a href="#">Resources <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  <div aria-label="Second level">
                    <span class="parent-title" aria-hidden="true">Resources</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>
                  <div class="mega-custom">
                    <div class="mega-custom-wrapper">
                      <div class="span-two mega-custom-card">
                        <img src="https://placekitten.com/g/572/370"/>
                      </div>
                      <div class="span-one mega-custom-card">
                        <h2 class="mega-custom-parent-title">Main Attraction</h2>
                        <p class="mega-custom-card-meta">Research at the Astronomy &amp; Astrophysics Research Lab (AARL) spans from understanding the early solar system and our own beginnings to the origin of galaxies in the Universe.</p>
                        <ul >
                          <li class="mega-custom-parent-link"><a href="#">Collections</a></li>
                          <li><a href="#">Fields of Research</a></li>
                          <li><a href="#">Fields of Research</a></li>
                        </ul>
                      </div>
                      <div class="span-one mega-custom-card">
                      </div>
                    </div>
                  </div>
                </li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
            <nav class="utility-nav-alt-one" role="navigation" aria-label="Utility Navigation">
              <ul class="wrapper">
                <li><a href="#" title="NC Gov"><span>NC.Gov</span></a></li>
                <li><a href="#" title="Agencies"><span>Agencies</span></a></li>
                <li><a href="#" title="Jobs"><span>Jobs</span></a></li>
                <li><a href="#" title="Services"><span>Services</span></a></li>
                <li><a href="#" title="Jobs"><span>Jobs</span></a></li>
                <li><a href="#" title="Services"><span>Services</span></a></li>
              </ul>
            </nav>
          </div>
        </div>
      </header>
    </div> 

2.3.3 Header Navigation - Alt Theme Two

<div class="header-container header-alt-two">
  <header class="group wrapper">
    <div class="header-search header-search-alt-two">
      <div class="search">
        <div class="search-wrapper">
          <form>
            <input type="search" placeholder="Search..." />
            <input type="submit" value="" /><span class="icon-search" aria-hidden="true"></span>
          </form>
        </div>
        <button class="search-toggle" id="searchToggle"><span class="icon-search" aria-hidden="true"></span></button>
      </div>
    </div>
    <div class="mobile-nav">
      <a href="/" rel="home" title="NC DCR Home" class="site-title">
        <img src="../img/l_museum-natural-sciences.png"/>
      </a>
      <button class="search-trigger"><span>Search </span><span class="icon-search" aria-hidden="true"></span></button>
      <button class="flyout-trigger open-trigger"><span class="icon-dehaze" aria-hidden="true"></span><span> Menu</span></button>
      <div class="header-cta-region-desktop">
        <a href="#" class="button button-theme">Buy Tickets</a>
      </div>
    </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-alt-two " 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="#">Places to Go <span class="icon-chevron-right" aria-hidden="true"></span></a>
              <div aria-label="Second level">
                <a href="#" class="parent-title wrapper">Places to Go</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>
              <div class="mega-custom">
                <div class="mega-custom-wrapper">
                  <div class="span-one mega-custom-card">
                    <img src="https://placekitten.com/g/286/160"/>
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research &amp; Fields of Fact</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                  </div>
                  <div class="span-one mega-custom-card">
                    <img src="https://placekitten.com/g/286/160"/>
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research &amp; Fields of Fact &amp; Fields of Fiction</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                  </div>
                  <div class="span-one mega-custom-card">
                    <img src="https://placekitten.com/g/286/160"/>
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                  </div>
                  <div class="span-one mega-custom-card">
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                    </ul>
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li class="has-mega has-dropdown"><a href="#">Things to Do <span class="icon-chevron-right" aria-hidden="true"></span></a>
              <div aria-label="Second level">
                <span class="parent-title" aria-hidden="true">Things to Do</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>
              <div class="mega-custom">
                <div class="mega-custom-wrapper">
                  <div class="span-one mega-custom-card">
                    <img src="https://placekitten.com/g/286/370"/>               
                  </div>
                  <div class="span-one mega-custom-card">
                    <h2 class="mega-custom-parent-title">Collections</h2>
                    <p class="mega-custom-card-meta">Research at the Astronomy &amp; Astrophysics Research Lab (AARL) spans from understanding the early solar system and our own beginnings to the origin of galaxies in the Universe.</p>
                    <ul >
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                  </div>
                  <div class="span-one mega-custom-card">
                    <img src="https://placekitten.com/g/286/160"/>
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                  </div>
                  <div class="span-one mega-custom-card">
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                    <ul>
                      <li class="mega-custom-parent-link"><a href="#">Fields of Research</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li class="has-dropdown">
              <a href="#">Education <span class="icon-chevron-right" aria-hidden="true"></span></a>
              <div aria-label="Second level">
                <a href="#" class="parent-title wrapper">Education</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>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name &amp; Link Name &amp; Link Name<span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name &amp; Link Name &amp; Link Name<span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                  <li>
                    <a href="#">Level 2 Link Name <span class="icon-chevron-right" aria-hidden="true"></span></a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="has-mega has-dropdown"><a href="#">Resources <span class="icon-chevron-right" aria-hidden="true"></span></a>
              <div aria-label="Second level">
                <span class="parent-title" aria-hidden="true">Resources</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>
              <div class="mega-custom">
                <div class="mega-custom-wrapper">
                  <div class="span-two mega-custom-card">
                    <img src="https://placekitten.com/g/572/370"/>
                  </div>
                  <div class="span-one mega-custom-card">
                    <h2 class="mega-custom-parent-title">Main Attraction</h2>
                    <p class="mega-custom-card-meta">Research at the Astronomy &amp; Astrophysics Research Lab (AARL) spans from understanding the early solar system and our own beginnings to the origin of galaxies in the Universe.</p>
                    <ul >
                      <li class="mega-custom-parent-link"><a href="#">Collections</a></li>
                      <li><a href="#">Fields of Research</a></li>
                      <li><a href="#">Fields of Research</a></li>
                    </ul>
                  </div>
                  <div class="span-one mega-custom-card">
                  </div>
                </div>
              </div>
            </li>
            <li class="expanded has-dropdown"><a href="#">News <span class="icon-chevron-right" aria-hidden="true"></span></a>
              <div aria-label="Second level">
                <span class="parent-title" aria-hidden="true">News</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 class="expanded has-dropdown"><a href="#">About <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="#">Contact</a></li>
          </ul>
        </nav>
        <nav class="utility-nav-alt-two" role="navigation" aria-label="Utility Navigation">
          <ul class="wrapper utility-nav-left">
            <li><a href="#" title="NC Gov"><span>NC.Gov</span></a></li>
            <li><a href="#" title="Agencies"><span>Agencies</span></a></li>
            <li><a href="#" title="Jobs"><span>Jobs</span></a></li>
            <li><a href="#" title="Services"><span>Services</span></a></li>
          </ul>
          <ul class="wrapper utility-nav-right">
            <li><a href="#" title="Agencies"><span>Agencies</span></a></li>
            <li><a href="#" title="Jobs"><span>Jobs</span></a></li>
            <li><a href="#" title="Services"><span>Services</span></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div> 
<div class="header-cta-region wrapper">
  <a href="#" class="button button-theme">Buy Tickets</a>
</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.4.2 Footer Alt Theme One

<div class="footer-container-alt-one">
  <footer class="group">
    <section class="band 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 pad-small enterprise">
      <div class="wrapper">
        <section>
          <nav class="footer-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_museum-natural-sciences.png" alt="Nothing Compares. North Carolina"/></a>
          </div>
        </section>
      </div>
    </section>
  </footer>
</div>

2.4.3 Footer Alt Theme Two

<div class="footer-container-alt-two">
  <footer class="group">
    <section class="band topical theme-alt-primary-1">
      <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 pad-small enterprise">
      <div class="wrapper">
        <section>
          <nav class="footer-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_museum-natural-sciences.png" 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.1.2 Page Title with subheading

Page Title Subheading

<h1 class="page-title">Page Title <small itemprop="description">Subheading</small></h1>

2.5.2 Section Title

Section Title

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

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.
.theme-alt-primary-1

Alt theme primary background 1

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-alt-primary-2

Alt theme primary background 2

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-alt-primary-3

Alt theme primary background 3

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-alt-primary-3

Alt theme primary background 4

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-alt-secondary-1

Alt theme secondary background 1

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-alt-secondary-2

Alt theme secondary background 2

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-alt-secondary-3

Alt theme secondary background 3

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-alt-secondary-4

Alt theme secondary background 4

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.6.10 Page Templates - NC DOC

2.7.6.11 Page Templates - NC DOR

2.7.6.12 Page Templates - DC Alt Themes

2.7.6.13 Page Templates - DC Alt Theme Layouts

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 News/Blog

2.7.12 Employee Directory