Header Stable

The Header is an obligatory basic element placed at the top of the interface.

Compact Header

App Identifier

<header>
  <div class="application-bar application-bar--compact ">
  <div class="application-bar__container">
    <div class="application-bar__logo">
        <div class="logo logo--compact "></div>
    </div>
    …
  </div>
  <div class="navigation-bar  js-navigation-bar" data-label-more="More…">
    …
  </div>
</header>

Marketing Header Deprecated

Product Name

<header>
  <div class="application-bar ">
    …
  </div>
  <div class="navigation-bar  js-navigation-bar" data-label-more="More…">
    …
  </div>
</header>