Footer
Footer container with Flix-branded graphics.
The footer component helps you build graphic reach footers by providing the necessary layout positioning.
You can combine footer-nav, divider or other components to achieve various footer layout options.
The footer image illustration can be used as a web-component from the illustration library.
Please refer to our illustration library for more options.
Loading the data
This might take a while, in fact it might just be loading forever...
<section class="flix-main-wrapper">
<header class="flix-header flix-header--unfixed">
<div class="flix-header__inner">
<div class="flix-header-brand flix-header-brand--square">
<a class="flix-header-brand__link" href="/">
<img class="flix-header-brand__img" src="//honeycomb.flixbus.com/dist/13.5.0/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
</a>
</div>
</div>
</header>
<section class="flix-page-container">
<div class="flix-grid flix-grid--justify-center">
<div class="flix-col-12 flix-col-8-sm flix-col-6-xl flix-has-text-centered">
<div class="flix-spinner flix-space-4-top flix-space-2-bottom"></div>
<h1 class="flix-h1">Loading the data</h1>
<p class="flix-text">
This might take a while, in fact it might just be loading forever...
</p>
</div>
</div>
</section>
<footer class="flix-footer">
<div class="flix-footer__illustration">
<flix-illustration class="flix-footer__img" resize="cover" name="landscape-brazil-flixbus-s" aria-hidden="true"></flix-illustration>
<flix-illustration class="flix-footer__img flix-footer__img--desktop" resize="cover" name="landscape-brazil-flixbus" aria-hidden="true"></flix-illustration>
</div>
</footer>
</section>And you can also use regular image tags for the footer image:
Loading the data
This might take a while, in fact it might just be loading forever...
<section class="flix-main-wrapper">
<header class="flix-header flix-header--unfixed">
<div class="flix-header__inner">
<div class="flix-header-brand flix-header-brand--square">
<a class="flix-header-brand__link" href="/">
<img class="flix-header-brand__img" src="//honeycomb.flixbus.com/dist/13.5.0/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
</a>
</div>
</div>
</header>
<section class="flix-page-container">
<div class="flix-grid flix-grid--justify-center">
<div class="flix-col-12 flix-col-8-sm flix-col-6-xl flix-has-text-centered">
<div class="flix-spinner flix-space-4-top flix-space-2-bottom"></div>
<h1 class="flix-h1">Loading the data</h1>
<p class="flix-text">
This might take a while, in fact it might just be loading forever...
</p>
</div>
</div>
</section>
<footer class="flix-footer">
<div class="flix-footer__illustration">
<img class="flix-footer__img" src="//honeycomb.flixbus.com/dist/13.5.0/img/footer-bus-and-train-mobile.svg" aria-hidden="true" alt=""/>
<img class="flix-footer__img flix-footer__img--desktop" src="//honeycomb.flixbus.com/dist/13.5.0/img/footer-bus-and-train.svg" aria-hidden="true" alt=""/>
</div>
</footer>
</section>Sticky positioning
Footer is "sticky" by default, meaning it "sticks" to the bottom of the screen, for things to work nicely it is required that you add flix-main-wrapper--full modifier to the main-wrapper component.
Width options
Similarly to header we provide a "fullwidth" variation for the footer.
This can be triggered with a flix-footer--fullwidth modifier.
When doing so make sure your header follows the same pattern and flix-header--fullwidth modifier is applied to it.
Images and accessibility
Note that footer images are hidden from screen readers with aria-hidden attribute by default.
Please remove this attribute if you need these images to be accessible, then provide a meaningful localized alt text for both mobile and desktop images.