Header Stable

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

<uimc-application-bar></uimc-application-bar>
<uimc-navigation-bar></uimc-navigation-bar>

Because the Header module is a composition of two components, details about available slots are documented seperatly for the Application Bar and the Navigation Bar.

Compact Header

<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

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