Box
This component can be used to visually group elements together.
Appearance variations
There are 2 appearance variations for boxes:
- normal one (outlined with borders), displayed by default;
- highlighted one (outlined with shadows), requires
flix-box--highlightedmodifier;
Normal box
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
<div class="flix-box">
<h3 class="flix-h3 flix-h3--section-header">Normal box</h3>
<div class="flix-text">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
</div>
<a class="flix-btn flix-btn--tertiary" href="#">Tertiary CTA</a>
</div>Highlighted box
<div class="flix-box flix-box--highlighted">
<h3 class="flix-h3 flix-h3--section-header">Highlighted box</h3>
<ul class="flix-list-wrapper">
<li class="flix-list-wrapper__item">
<a class="flix-list-wrapper__content">Bus Copenhagen - Berlin</a>
</li>
<li class="flix-list-wrapper__item">
<a class="flix-list-wrapper__content">Bus Berlin - Amsterdam</a>
</li>
<li class="flix-list-wrapper__item">
<a class="flix-list-wrapper__content">Bus Berlin - Bremen</a>
</li>
</ul>
</div>Spacing variations
Each appearance variation can be combined with 2 spacing variations:
- default that has 24px inner spacing on the sides;
- small that has 12px spacing, requires adding
flix-box--smallmodifier.
Normal box:
<div class="flix-box">
<span class="flix-skeleton flix-skeleton--h-md flix-skeleton--w-md"></span>
<p class="flix-text">
<span class="flix-skeleton"></span>
<span class="flix-skeleton flix-skeleton--w-lg"></span>
<span class="flix-skeleton flix-skeleton--w-sm"></span>
</p>
</div>Smaller box:
<div class="flix-box flix-box--small">
<span class="flix-skeleton flix-skeleton--h-md flix-skeleton--w-md"></span>
<p class="flix-text">
<span class="flix-skeleton"></span>
<span class="flix-skeleton"></span>
<span class="flix-skeleton flix-skeleton--w-sm"></span>
</p>
</div>