Skip to main contentSkip to site searchSkip to component search
Honeycomb

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.

Leave a comment 
<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--secondary" 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">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">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">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">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">Expected to be back on time at Leipzig central bus station.</p>
</div>