Main wrapper
The flix-main-wrapper takes care of setting a proper background color for your page as well as some basic styles for root/body element.
Normally we recommend applying it to the <body> HTML element or a direct parent of it.
Primary main wrapper color.
Some content in a box.
Some content outside the box.
<div class="flix-theme-flix">
<div class="flix-main-wrapper">
<header class="flix-header flix-header--unfixed flix-space-2-bottom">
<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">
<h1 class="flix-h1">Primary main wrapper color.</h1>
<div class="flix-box flix-box--small">
<p class="flix-text">Some content in a box.</p>
</div>
<p class="flix-text flix-space-2-bottom">Some content outside the box.</p>
</main>
</div>
</div>To use secondary background color, apply the flix-main-wrapper--secondary modifier to the component.
You can apply flix-main-wrapper--full modifier to it to make the component occupy the whole viewport no matter how much content it has inside.
This is specifically useful for dark themes where having the proper background is crucial.
Dark secondary main wrapper.
Some content in a box.
Some content outside the box.
<div class="flix-theme-flix flix-theme-dark">
<div class="flix-main-wrapper flix-main-wrapper--secondary">
<header class="flix-header flix-header--unfixed flix-space-2-bottom">
<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">
<h1 class="flix-h1">Dark secondary main wrapper.</h1>
<div class="flix-box flix-box--small">
<p class="flix-text">Some content in a box.</p>
</div>
<p class="flix-text flix-space-2-bottom">Some content outside the box.</p>
</main>
</div>
</div>