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.
<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">
<flix-icon class="flix-btn__icon" name="arrow-left" size="4" aria-hidden="true"></flix-icon>
</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">
<flix-icon class="flix-btn__icon" name="info" solid="" size="4" aria-hidden="true"></flix-icon>
</button>
<button type="button" aria-label="Add luggage" class="flix-btn flix-btn--square flix-btn--link">
<flix-icon class="flix-btn__icon" name="offer" solid="" size="4" aria-hidden="true"></flix-icon>
</button>
<button type="button" aria-label="View cart" class="flix-btn flix-btn--square flix-btn--link">
<flix-icon class="flix-btn__icon" name="cart" solid="" size="4" aria-hidden="true"></flix-icon>
</button>
</div>
</div>
</div>
</div>
</header>
<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">
<flix-icon class="flix-btn__icon" name="arrow-big-left" size="4" aria-hidden="true"></flix-icon>
</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">
<flix-icon class="flix-btn__icon" name="question" size="4" aria-hidden="true"></flix-icon>
Help
</button>
</div>
</div>
</div>
</header>