Styleguide

Header

• v.0.0.1

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://localhost:3000/assets/img/placeholder/avatar@1x.jpg 1x, http://localhost:3000/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>