Changelog:

0.1.0: Passage en position absolute, fix min-width
0.0.1: Ajout du composant

Header (structure)

<header class="header" role="banner">
  <div class="header-wrapper">
    <div class="header-inner">
      Aligné à gauche
    </div>
    <div class="header-inner header-inner--push">
      Aligné à droite
    </div>
  </div>
</header>

Header (exemple complexe)

Se référer à la documentation sur le Menu pour les variations de menu.

<header class="header" role="banner">
  <div class="header-wrapper">
    <div class="header-inner">
      <nav class="menu">
        <ul class="menu-inner menu-inner--push">
          <li class="menu-item"><a class="menu-link is-active" href="#">Accueil</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Indicateurs</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Calendrier</a></li>
        </ul>
      </nav>
    </div>
    <div class="header-inner header-inner--push">
      <div class="header-status">Dernière modification il y a 10 heures…</div>
      <div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button">
        <div class="dropdown-button" role="button">
          <div class="avatar">
            <div class="avatar-thumb">
              <img src="assets/img/placeholder/avatar@1x.jpg" srcset="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg 1x, http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@2x.jpg 2x" width="40" height="40" alt="Laurent Sutterlity" />
            </div>
          </div>
          <span class="icon icon--down"></span>
        </div>
        <ul class="dropdown-content">
          <li class="dropdown-item">
            <a class="dropdown-link" href="#">Mon compte</a>
          </li>
          <li class="dropdown-item">
            <a class="dropdown-link" href="#">Adminstration</a>
          </li>
          <li class="dropdown-item">
            <a class="dropdown-link" href="#">
              <span class="icon icon--disconnect icon--mRight"></span>
              Déconnexion
            </a>
          </li>
        </ul>
      </div>
      <button class="button button--circular button--ghostAlternate icon icon--notif">
        <div class="notifNumber">88</div><span>Menu</span>
      </button>
    </div>
  </div>
</header>