@moodxd/component-header v1.0.5

MoO Header

App

<header id="nav" class="Header">

  <div class="Header-pseudoNav">
    <nav class="Header-brand u-lg-hidden">
        <div>
            <a class="Header-brandLink Header-brandMark u-pH0" href="/">
              <img class="Logo" alt="Mutual of Omaha Insurance Company" src="//cdnitg.mutualofomaha.com/images/corporate/pixel.png">
            </a>
            <a class="Header-brandLink Header-wordMark u-pH0" href="/">
              <img class="Logo" alt="Mutual of Omaha Insurance Company" src="//cdnitg.mutualofomaha.com/images/corporate/pixel.png">
            </a>
        </div>
    </nav>
    <div class="Header-toggle">
      <a href="#nav" class="Header-toggleLink u-inlineBlock u-alignMiddle" data-nav-toggle>
        <span class="Icon Header-iconToggle"></span>
        <span class="u-hiddenVisually">Open/Close Menu</span>
      </a>
    </div>
  </div>

  <div class="Hero">
    <div class="Container u-pT2 u-pB8 u-pH4 u-md-pH8">
      <h1 class="Hero-headline u-pT11">
        <a href="/" class="u-fontWhite">Page Title</a>
      </h1>
    </div>
  </div>

  <div class="Header-navigation">
    <div class="Navigation">
      <div class="Container">
        <nav class="Header-brand u-hidden u-md-block">
          <div>
            <a class="Header-brandLink u-pH0" href="/">
              <img class="Logo" alt="Mutual of Omaha Insurance Company" src="//cdn.mutualofomaha.com/images/corporate/pixel.png">
            </a>
          </div>
        </nav>
        <nav class="MainNav">
          <div class="MainNav-item">
            <a href="/link-1" class="MainNav-itemLink">
              <span class="MainNav-itemPill">Link</span>
            </a>
          </div>
          <div class="MainNav-item">
            <a href="/link-2" class="MainNav-itemLink">
              <span class="MainNav-itemPill">Link</span>
            </a>
          </div>
        </nav>
      </div>
    </div>
    <div class="Navigation-dropdownContainer">
        <div class="Container"></div>
    </div>
  </div>

</header>