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>

Outer spacing

The box only provides a bottom margin to the sibling dom element. For all the other cases please use either Honeycomb helper css classes or custom styles. This means when boxes are placed within the grid columns additional margins should be specified.

Refer to examples bellow to see the difference in behavior.

2 boxes side-by-side

This box has bottom margin to the sibling box

This box has no bottom margin as it is the last child within this DOM element.

So this text comes right after.

<div>
    <div class="flix-box">
      <p class="flix-text">This box has bottom margin to the sibling box</p>
    </div>
    <div class="flix-box">
      <p class="flix-text">This box has no bottom margin as it is the last child within this DOM element.</p>
    </div>
</div>
<p class="flix-text">So this text comes right after.</p>

Boxes placed within the grid columns

This box has no siblings and has no margins on its own.

So this text comes right after.

This box has no siblings and has no margins on its own.

The margin is set with a helper CSS class.

This box also has no margins. 
<div class="flix-grid">
  <div class="flix-col-12">
    <div class="flix-box">
      This box has no siblings and has no margins on its own.
    </div>
  </div>
  <div class="flix-col-12">
    <p class="flix-text">So this text comes right after.</p>
  </div>
  <div class="flix-col-12">
    <div class="flix-box flix-space-4-bottom">
      <p class="flix-text">This box has no siblings and has no margins on its own.</p>
      <p class="flix-text">The margin is set with a helper CSS class.</p>
    </div>
  </div>
  <div class="flix-col-12">
    <div class="flix-box">
      This box also has no margins.
    </div>
  </div>
</div>