Header Bar
This almost completely customizable component is a variation from the header.
<style type="text/css">
.example-header-bar-connection {
display: flex;
align-items: center;
}
.example-header-bar-item {
color: var(--flix-header-color);
}
</style>
<header class="flix-header-bar">
<div class="flix-header-bar__content">
<div class="flix-grid flix-grid--align-center">
<div class="flix-col">
<div class="example-header-bar-connection">
<button type="button" aria-label="Go back" class="flix-btn flix-btn--link flix-btn--square flix-btn--has-icon example-header-bar-item"><i class="flix-icon flix-icon-arrow-left" aria-hidden="true"></i></button>
<h4 class="flix-h4 flix-h4--section-header flix-h3--space-flush flix-space-2-left example-header-bar-item">Checkout</h4>
</div>
</div>
<div class="flix-col flix-has-text-right">
<button type="button" aria-label="Toggle additional info" class="flix-btn flix-btn--link flx-btn--square flix-btn--has-icon example-header-bar-item"><i class="flix-icon flix-icon-info-solid" aria-hidden="true"></i></button>
<button type="button" aria-label="Add luggage" class="flix-btn flix-btn--link flx-btn--square flix-btn--has-icon example-header-bar-item"><i class="flix-icon flix-icon-offer-solid" aria-hidden="true"></i></button>
<button type="button" aria-label="View cart" class="flix-btn flix-btn--link flx-btn--square flix-btn--has-icon example-header-bar-item"><i class="flix-icon flix-icon-cart-solid" aria-hidden="true"></i></button>
</div>
</div>
</div>
</header>
<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-8">
<div class="example-header-bar-connection">
<button type="button" aria-label="Go back" class="flix-btn flix-btn--link flix-btn--square flix-btn--has-icon example-header-bar-item"><i class="flix-icon flix-icon-arrow-big-left" aria-hidden="true"></i></button>
<div class="flix-space-2-left">
<h4 class="flix-h4 flix-h4--section-header flix-h3--space-flush example-header-bar-item">Berlin - Munich</h4>
<p class="flix-text--small flix-space-flush-bottom example-header-bar-item">
Tue, 2 Jun 2020 | 09:00 | 1 Adult
</p>
</div>
</div>
</div>
<div class="flix-col-4 flix-has-text-right">
<button type="button" aria-label="Toggle filter" class="flix-btn flix-btn--link flx-btn--square flix-btn--has-icon example-header-bar-item"><i class="flix-icon flix-icon-filter" aria-hidden="true"></i></button>
</div>
</div>
</div>
</header>
Details
If you need something very custom to be displayed in the header and available "widget" slot doesn't suit your needs then Header bar is the way to go.
This component simply exposes a free content area that resembles the Header in size. Similar to header it can be either fixed or not fixed at the top of you page.
We highly 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.
Make sure to checkout the given examples in order to see how these 2 components can work together.
Modifiers
| Selector | Description |
|---|---|
flix-header-bar--fixed | applies fixed position, making it behaving like a default fixed header |
