Sky

Container for topmost page content.

By default includes .Sky-nav, responsive navigation designed specifically for this containing element.

Add clouds with the .Sky--clouds modifier.

<div class="Sky ">
  <div class="u-containSpread">
    <header class="Sky-nav" role="banner">
      <ul class="Sky-nav-controls">
        <li><a class="Sky-nav-controls-skipToMain Button Button--defaultDark u-textNoWrap u-hiddenTillFocus"
           href="#main">Skip to main content</a></li>
        <li><a class="Sky-nav-controls-skipToMenu Button Button--defaultDark"
           href="#menu" aria-label="Skip to navigation">Menu</a></li>
      </ul>
      <a class="Sky-nav-logo" href="/">
<svg viewBox="0 0 24 24" width="80" height="80" aria-labelledby="logo-title" role="img" class="Sky-nav-logo-object">              <title id="logo-title">Cloud Four</title>

  <path d="M6.75,15.12a4.36,4.36,0,0,1-1.91-2.29,1.86,1.86,0,0,1,.52-1c0.48-.55,6.07-6.63,8.44-7.67A11.75,11.75,0,0,0,11.92,4c-7,0-7.67,5-7.67,5S0,10.3,0,14.18C0,19.73,6.84,20,6.84,20A15.3,15.3,0,0,0,9,19.92a1.29,1.29,0,0,0,.89-0.71c0.41-1,1-2.59,1.58-4.26C9.2,15.06,7,15.17,6.75,15.12Z"/>
  <path d="M24,13c0-4.91-4.81-5.44-4.81-5.44a6.11,6.11,0,0,0-2.14-2.2c-0.43,1.53-1.54,5.61-1.6,6.38h1.68s0.27,0,.2.33c-0.16.75-.58,2.58-1.48,2.64l-1.18.07c-0.33,1.35-.68,2.76-0.93,3.78a4.7,4.7,0,0,0,3,.91,4.59,4.59,0,0,0,3.35-1.23C24.14,17.56,24,13,24,13Z"/>
  <path d="M13.89,6.86A42.33,42.33,0,0,0,8.9,12l3.61-.14c0.74-2.08,1.38-3.93,1.66-4.74A0.3,0.3,0,0,0,13.89,6.86Z"/>
</svg>          </a>
      <nav class="Sky-nav-menu" role="navigation" id="menu">
        <ul class="Sky-nav-menu-items">
          <li><a class="Sky-nav-menu-item" href="/#main" aria-current>What We Do</a></li>
          <li><a class="Sky-nav-menu-item" href="/">Our Approach</a></li>
          <li><a class="Sky-nav-menu-item" href="/">Our Work</a></li>
          <li><a class="Sky-nav-menu-item" href="/">Articles</a></li>
          <li><a class="Sky-nav-menu-item" href="/">Speaking</a></li>
          <li><a class="Sky-nav-menu-item" href="/">Labs</a></li>
          <li><a class="Sky-nav-menu-item" href="/">Team</a></li>
        </ul>
      </nav>
    </header>

  </div>
</div>