Page Template

As the names imply, the Global Header and Global Footer are used by default on every page.

The Global Header is based on the Bootstrap Navbar contains the logo, links to the major pages and content sections, and a button-style link for the contact page.

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container">
      <a title="Nine Labs - Strategy &amp; Design Consulting for Digital Product Teams" class="navbar-brand" href="/"><svg width="54px" height="54px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Solo-Mark" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group" transform="translate(57.000000, 53.000000)" fill="#F280B1">
        <rect id="Rectangle" x="180" y="20" width="93" height="255" rx="46.5"></rect><rect id="Rectangle" x="21" y="20" width="93" height="255" rx="46.5"></rect>
        <path d="M147.026465,-12.3715371 L147.813375,-12.3749548 C173.409938,-12.4861266 194.250175,8.1738651 194.361347,33.7704282 C194.362167,33.9593115 194.361833,34.1481982 194.360344,34.3370775 L192.575638,260.729002 C192.379041,285.667505 172.543735,306.010376 147.618158,306.836899 L145.977005,306.891319 C121.358285,307.707666 100.739088,288.41203 99.9227409,263.793309 C99.9046158,263.246708 99.896546,262.699819 99.8985357,262.152921 L100.728731,33.9588533 C100.821635,8.4225974 121.490281,-12.2606275 147.026465,-12.3715371 Z" id="Rectangle" style="mix-blend-mode: multiply;" transform="translate(147.130012, 147.270447) rotate(-45.000000) translate(-147.130012, -147.270447) "></path>
      </g></g></svg><div class="brand-tagline">Strategy &amp; Design Consulting for Digital Product Teams</div></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars text-pink"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown"><a href="/services/" id="ServicesMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span>What We Do</span></a>
            <div class="dropdown-menu" aria-labelledby="ServicesMenu">
              <a class="dropdown-item d-lg-none" href="/services/">All Services</a>
              <a class="dropdown-item" href="#">Process</a>
              <a class="dropdown-item" href="#">Target Market Definition</a>
              <a class="dropdown-item" href="#">Value Proposition Definition</a>
              <a class="dropdown-item" href="#">Product Positioning</a>
              <a class="dropdown-item" href="#">User Journey Workshop</a>
              <a class="dropdown-item" href="#">UI Prototyping and Design</a>
              <a class="dropdown-item" href="#">Design Systems</a>
            </div>
          </li>
          <li class="nav-item"><a href="/outcomes/" class="nav-link"><span>Outcomes</span></a></li>
          <li class="nav-item"><a href="/outcomes/" class="nav-link"><span>Case Studies</span></a></li>
          <li class="nav-item dropdown"><a href="/insights/" id="InsightsMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span>Insights</span></a>
            <div class="dropdown-menu" aria-labelledby="InsightsMenu">
              <a class="dropdown-item d-lg-none" href="/insights/">All Insights</a>
              <a class="dropdown-item" href="#">Articles</a>
              <a class="dropdown-item" href="#">Webinars</a>
              <a class="dropdown-item" href="#">Podcast Episodes</a>
            </div>
          </li>
          <li class="nav-item"><a href="#" class="nav-link"><span>About You</span></a></li>
          <li class="nav-item"><a href="#" class="nav-link"><span>About Us</span></a></li>
          <li class="nav-item"><a href="#" class="nav-link"><span>Contact</span></a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>


The Global Footer is a four column spread containing links to all the major pages and content sections of the website. It also includes office addresses and contact information.

<footer>
  <div class="container">
    <div class="row">
      <div class="info-group">
        <h6>Services</h6>
        <ul>
          <li><a href="/services/#business-innovation">Business Innovation</a></li>
          <li><a href="/services/#product-strategy">Product Strategy</a></li>
          <li><a href="/services/#customer-insights">Customer Insights</a></li>
          <li><a href="/services/#user-experience-design">User Experience Design</a></li>
          <li><a href="/services/#product-prototyping">Product Prototyping</a></li>
          <li><a href="/services/#user-interface-design">User Interface Design</a></li>
          <li><a href="/services/#design-systems">Design Systems</a></li>
        </ul>
      </div>
      <div class="info-group">
        <h6>Outcomes</h6>
        <ul>
          <li><a href="/outcomes/#revenue">Increased Revenue</a></li>
          <li><a href="/outcomes/#savings">Reduced Costs</a></li>
          <li><a href="/outcomes/#satisfaction">Increased Satisfaction</a></li>
          <li><a href="/outcomes/#process">Improved Processes</a></li>
          <li><a href="/outcomes/#usability">Improved Usability</a></li>
        </ul>
      </div>
      <div class="info-group">
        <h6>Company</h6>
        <ul>
          <li><a href="/insights/">Latest Insights</a></li>
          <li><a href="/process/">Our Process</a></li>
          <li><a href="/about/">About Us</a></li>
          <li><a href="/newsletter/">Newsletter</a></li>
          <li><a href="/designdriven/">Podcast</a></li>
          <li><a href="https://loopsbook.com">Book</a></li>
        </ul>
      </div>
      <div class="info-group">
        <h6>Offices</h6>
        <p><strong>Atlanta</strong><br>1040 W. Marietta Street NW<br>Atlanta, GA 30318</p>
        <p><strong>New York</strong><br>222 Broadway, 19th Floor<br>New York, NY 10038</p>
        <p><strong>Amsterdam</strong><br>Weteringschans 165 C<br>1017 XD Amsterdam</p>
      </div>
    </div>
  </div>
  <div class="subfooter">
    <div class="brand-statement">
      <img src="https://designsystem.ninelabs.com/assets/img/brand-logo-text.svg" alt="Nine Labs Logo" />
      <p>Strategy &amp; Design Consulting for Digital Product Teams</p>
    </div>
    <p>&copy; Novelaboratori, LLC unless otherwise noted // <a href="">Privacy Policy</a></p>
    <div class="social-stack">
      <a href="https://www.twitter.com/ninelabs" class="fa-stack icon-twitter" target="_blank"><span class="sr-only">Twitter</span><i class="fab fa-twitter mono fa-stack-1x fa-inverse"></i></a>
      <a href="https://www.linkedin.com/company/nine-labs/" class="fa-stack icon-linkedin" target="_blank"><span class="sr-only">Linkedin</span><i class="fab fa-linkedin mono fa-stack-1x fa-inverse"></i></a>
      <a href="https://www.instagram.com/ninelabs" class="fa-stack icon-instagram" target="_blank"><span class="sr-only">Instagram</span><i class="fab fa-instagram mono fa-stack-1x fa-inverse"></i></a>
    </div>
  </div>
</footer>


Pagination

This component extends the default Bootstrap Pagination Component and adds the Nine Labs style.

<div class="pagination-container">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>
</div>