Skip to main contentSkip to site searchSkip to component search
Honeycomb

Theme wrapper

Check the Themes guide for details on how to implement the theme container and choose between light and dark themes according to user preference.

The theme container class name can be applied to the HTML tag if you mind reducing the number of elements on a page, this is also required if you want to use TVM modes.

Otherwise, applying the theme class names to any div will create a theme wrapper and apply said theme and mode to all other components inside of it.

Honeycomb Logo

Hi, I'm your Flix theme wrapper!

<!-- 👇 Flix theme applied to the app theme wrapper. This can be the HTML tag of the page. -->
<div class="flix-theme-flix">
  <div 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" width="36" height="36" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo">
          </a>
        </div>
      </div>
    </header>
    <main class="flix-page-container flix-space-2-top">
      <div class="flix-box">
        <p class="flix-text">Hi, I'm your Flix theme wrapper!</p>
        <button class="flix-btn flix-btn--primary">Call to action!</button>
      </div>
    </main>
  </div>
</div>

You can include multiple themes in the same page and change them in nested theme wrappers by changing the theme class name.

The themes need to be included in the page head, check the Themes guide for all urls. You can include multiple theme wrappers to create sections using different themes inside of the app.

For example:

Flix Logo

This is a Flix app with lots of Flix related components.

This box is for Neptune things.

This box uses dark colors for dramatic effect.

<!-- 👇 Flix theme applied to the app theme wrapper. This can be the HTML tag of the page. -->
<div class="flix-theme-flix">
  <div class="flix-main-wrapper">
    <header class="flix-header flix-header--unfixed">
      <div class="flix-header__inner">
        <div class="flix-header-brand flix-header-brand--tall">
          <a class="flix-header-brand__link" href="/">
            <img class="flix-header-brand__img" width="107" height="36" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-logos-static/1.0.2/svg/flix-white.svg" alt="Flix Logo">
          </a>
        </div>
      </div>
    </header>
    <div class="flix-grid flix-grid--with-row-gap">
      <div class="flix-grid__cell flix-grid__cell--col-span-12 flix-box">
        <p class="flix-text">This is a Flix app with lots of Flix related components.</p>
        <button class="flix-btn flix-btn--primary">Call to action!</button>
      </div>
      <!-- 👇 Neptune theme applied to an inner theme wrapper. -->
      <div class="flix-theme-neptune flix-grid__cell flix-grid__cell--col-span-6">
        <div class="flix-box">
          <p class="flix-text">This box is for Neptune things.</p>
          <button class="flix-btn flix-btn--primary">Call to action!</button>
        </div>
      </div>
      <!-- 👇 Dark-flix theme applied to an inner theme wrapper. -->
      <div class="flix-theme-flix flix-theme-dark flix-grid__cell flix-grid__cell--col-span-6">
        <div class="flix-box">
          <p class="flix-text">This box uses dark colors for dramatic effect.</p>
          <button class="flix-btn flix-btn--primary">Call to action!</button>
        </div>
      </div>
    </div>
  </div>
</div>

Dark mode

To enable the dark mode of a theme that supports it, use the flix-theme-dark class alongside the theme name.

This example show the Kamil dark theme:

Kâmil Koç Logo

Here is an example of a common two-column page layout

Note the usage of Grid component that defines the layout and allows you fully customize the width of the columns as well as applying alignment options. 

<!-- 👇 Dark-Kamil theme applied to the app theme wrapper. This can be the HTML tag of the page. -->
<div class="flix-theme-kamil flix-theme-dark">
  <div class="flix-main-wrapper">
    <header class="flix-header flix-header--unfixed">
      <div class="flix-header__inner">
        <div class="flix-header-brand flix-header-brand--tall">
          <a class="flix-header-brand__link" href="/">
            <img class="flix-header-brand__img" width="78" height="36" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-logos-static/1.0.0/svg/kamil-white.svg" alt="Kâmil Koç Logo">
          </a>
        </div>
      </div>
    </header>
    <main class="flix-page-container flix-space-2-top">
      <div class="flix-grid">
        <div class="flix-grid__cell flix-grid__cell--col-span-12 flix-grid__cell--col-span-2-md">
          <ul class="flix-nav-side">
            <li class="flix-nav-side__item">
              <a class="flix-nav-side__link" href="#">Link 1</a>
            </li>
            <li class="flix-nav-side__item">
              <a class="flix-nav-side__link" href="#">Link 2</a>
            </li>
            <li class="flix-nav-side__item">
              <a class="flix-nav-side__link" aria-current="page" href="#">Link 3</a>
            </li>
          </ul>
        </div>
        <div class="flix-grid__cell flix-grid__cell--col-span-12 flix-grid__cell--col-span-10-md">
          <h3 class="flix-h3 flix-h3--section-header">Here is an example of a common two-column page layout</h3>
          <p class="flix-text">
            Note the usage of Grid component that defines the layout and allows you fully customize the width of the columns as well as applying alignment options.
          </p>
        </div>
      </div>
    </main>
  </div>
</div>

Related Components

Related Guides