Theme:
SCSS TypeScript TypeScript

Page Header

The page header is an essential layout component for all themes. A variety of components are structurally arranged and presented in the page header, such as the menu, the search, the website logo and much more.

Each theme has its own very special structure and settings in the page header. There are a few commonalities across themes. However, many of these are expanded upon and described in more detail in the respective themes.

A simple structure of the page header can look like this:

<header class="page-header">
  <div class="page-header__market">
    <div class="quote-ticker"><!-- ... --></div>
  </div>

  <div class="page-header__navi-action">
    <div class="icon icon--menu"></div>
  </div>

  <div class="page-header__logo">
    <div class="logo logo---xyz"></div>
  </div>

  <div class="page-header__search">
    <form class="form-group"><!-- ... --></form>
  </div>

  <div class="page-header__actions">
    <button class="button button--login">Login</button>
  </div>

  <div class="page-header__navigation">
    <nav class="menu"><!-- ... --></nav>
  </div>
</header>
Theme basic Screen size XL
html

finanzen.net Page Header

This is the theme .page-header for finanzen.net

  • .page-header--is-zero-user This theme header has a special modifier, that is only used in this theme. If the modifier is set, the logos will change.
  • The .page-header--is-zero-user modifier must be used, if the current user has an zero account. It will change the ads.
  • We have a extra style for WM times. You must add the .page-header--wm modifier, and change the logos to .logo--finanzen-net-wm and .logo--zero-open-depot-white.
  • .page-header--pro Change design for f.net PRO sites.
.page-header
  .page-header__market
    .quote-ticker
  .page-header__navi-action [data-sg-page-header-navigation="menu"] [data-sg-side-panel-toggle="menu"]
    .icon.icon--menu
    .icon.icon--close
  .page-header__logo
    .logo.logo--finanzen-net
    .logo.logo--zero-open-depot
  .page-header__search
    .form-group.form-group--icon.display-none-md
    .button.button--icon.display-none.display-block-md
  .page-header__actions
    .button.button--login
    ...
  .page-header__navigation.side-panel-mobile [data-sg-side-panel="menu"]
    .menu
Theme de [FIX] Screen size XL
html

finanzen.ch Page Header

This is the theme .page-header for finanzen.ch

.page-header
  .page-header__market
    .quote-ticker
  .page-header__navi-action [data-sg-page-header-navigation="menu"] [data-sg-side-panel-toggle="menu"]
    .icon.icon--menu
    .icon.icon--close
  .page-header__logo
    .logo.logo--finanzen-ch
  .page-header__search
    .form-group.form-group--icon.display-none-md
    .button.button--icon.display-none.display-block-md
  .page-header__actions
    .button.button--login
    ...
  .page-header__navigation.side-panel-mobile [data-sg-side-panel="menu"]
    .menu
Theme ch [FIX] Screen size XL
html

Markets Insider Page Header

This is the theme .page-header for https://markets.businessinsider.com/

.page-header
  .page-header__market
    .page-header
  .page-header__navi-action [data-sg-side-panel-toggle="menu"]
    .icon.icon--menu
    .icon.icon--close
  .page-header__logo-insider
    .logo.logo--insider
  .page-header__logo
    .logo.logo--markets-insider
  .page-header__search
    .form-group.form-group--icon.form-group--stretch
    ...
  .page-header__actions
    .button.button--login
    ...
  .page-header__navigation
    .menu
  .page-header__calendar
    .dropdown
Theme us [FIX] Screen size XL
html