Skip to main contentSkip to site searchSkip to component search
Honeycomb

Header Bar

This almost completely customizable component is a variation from the header.

If you need something very custom to be displayed in the header and available "widget" slot doesn't suit your needs then the header bar is the way to go.

This component simply exposes a free content area that resembles the Header in height.

Similar to the header, it also has the following modifiers:

flix-header-bar--fixed
Applies fixed position, making it behaving like a default fixed header.
flix-header-bar--fullwidth
Stretch the header bar contents to occupy the whole available width.

We recommend using Grid components inside the provided content area to achieve advised grid division and spacing values in between your content blocks.

This also allows you to leverage flexbox proxy modifiers of the Grid component to distribute the content in various ways achieving the desired result.

Checkout

<header class="flix-header-bar">
  <div class="flix-header-bar__content">
    <div class="flix-grid flix-grid--align-center">
      <div class="flix-col flix-col--inline">
        <button type="button" aria-label="Go back" class="flix-btn flix-btn--link flix-btn--square">
          <i class="flix-btn__icon flix-icon flix-icon-arrow-left" aria-hidden="true"></i>
        </button>
      </div>
      <div class="flix-col">
        <h4 class="flix-h4 flix-h4--section-header flix-h3--space-flush">Checkout</h4>
      </div>
      <div class="flix-col">
        <div class="flix-btn-group flix-btn-group--horizontal flix-btn-group--align-end">
          <button type="button" aria-label="Toggle additional info" class="flix-btn flix-btn--square flix-btn--link">
            <i class="flix-btn__icon flix-icon flix-icon-info-solid" aria-hidden="true"></i>
          </button>
          <button type="button" aria-label="Add luggage" class="flix-btn flix-btn--square flix-btn--link">
            <i class="flix-btn__icon flix-icon flix-icon-offer-solid" aria-hidden="true"></i>
          </button>
          <button type="button" aria-label="View cart" class="flix-btn flix-btn--square flix-btn--link">
            <i class="flix-btn__icon flix-icon flix-icon-cart-solid" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</header>

Berlin - Munich

Tue, 2 Jun 2020 | 09:00 | 1 Adult 

<header class="flix-header-bar flix-space-4-top">
  <div class="flix-header-bar__content">
    <div class="flix-grid flix-grid--align-center">
      <div class="flix-col flix-col--inline">
        <button type="button" aria-label="Go back" class="flix-btn flix-btn--link flix-btn--square">
          <i class="flix-btn__icon flix-icon flix-icon-arrow-big-left" aria-hidden="true"></i>
        </button>
      </div>
      <div class="flix-col">
        <h4 class="flix-h4 flix-h4--section-header flix-h3--space-flush">
          Berlin - Munich
        </h4>
        <p class="flix-text--small">
          Tue, 2 Jun 2020 | 09:00 | 1 Adult
        </p>
      </div>
      <div class="flix-col flix-col--inline">
        <button type="button" class="flix-btn flix-btn--link flix-btn--stacked">
          <i class="flix-btn__icon flix-icon flix-icon-question" aria-hidden="true"></i>
          Help
        </button>
      </div>
    </div>
  </div>
</header>