Box
This component can be used to visually group elements together.
The box groups content with a border and sometimes shadows, you don't have to use flix-box
only
with divs; an article can be used for news or blog posts while the search box in our home page is
a form element.
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--highlighted
modifier;
Blog title in a 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.
<article class="flix-box">
<h3 class="flix-h3 flix-h3--section-header">Blog title in a 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="#">Leave a comment</a>
</article>
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--small
modifier.
<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>
Color variations
The boxes can also have colored backgrounds for usage on specific situations
Expected to be back on time at Leipzig central bus station.
Expected to be back on time at Leipzig central bus station.
Expected to be back on time at Leipzig central bus station.
Expected to be back on time at Leipzig central bus station.
Expected to be back on time at Leipzig central bus station.
<div class="flix-box flix-box--small flix-box--dimmed">
<p class="flix-text flix-space-flush-bottom">Expected to be back on time at Leipzig central bus station.</p>
</div>
<div class="flix-box flix-box--small flix-box--neutral">
<p class="flix-text flix-space-flush-bottom">Expected to be back on time at Leipzig central bus station.</p>
</div>
<div class="flix-box flix-box--small flix-box--warning">
<p class="flix-text flix-space-flush-bottom">Expected to be back on time at Leipzig central bus station.</p>
</div>
<div class="flix-box flix-box--small flix-box--success">
<p class="flix-text flix-space-flush-bottom">Expected to be back on time at Leipzig central bus station.</p>
</div>
<div class="flix-box flix-box--small flix-box--danger">
<p class="flix-text flix-space-flush-bottom">Expected to be back on time at Leipzig central bus station.</p>
</div>