Skip to main contentSkip to site searchSkip to component search
Honeycomb

Infobox

The infobox highlights important/very relevant content within a layout.

The infobox highlights important and very relevant content within a layout.

Labelling the regions is important for screen readers. If your infobox contains a heading (<h1>, <h2>, etc) you should associate it using aria-labellledby, otherwise you must add an accessible aria-label to the section element.

Modifiers:

flix-infobox--warning
flix-infobox--danger
flix-infobox--success
State modifiers to change the appearance of the infobox.
flix-infobox--small
Set smaller inner paddings to occupy less space.
flix-infobox--small-icon
Use a smaller state icon.
flix-infobox--strong
Color the box background with its state color.

Infobox types:

The infobox has 4 appearance types relative to their states:

Neutral

This is the default state:

Neutral message example with a headline

You can put some other rich text HTML inside of infobox as well.

  • Like the list for example.
<section class="flix-infobox" aria-labelledby="infobox-title">
  <div class="flix-infobox__content">
    <h4 class="flix-h4 flix-h4--section-header" id="infobox-title">Neutral message example with a headline</h4>
    <p class="flix-text">You can put some other rich text HTML inside of infobox as well.</p>
    <ul class="flix-list">
      <li class="flix-list__item">Like the list for example.</li>
    </ul>
  </div>
</section>

Warning

flix-infobox--warning modifier:

This is a warning message 
<section class="flix-infobox flix-infobox--warning" aria-label="Warning infobox">
  <div class="flix-infobox__content">
    This is a warning message
  </div>
</section>

Danger

flix-infobox--danger modifier:

This is a very important error message to attract your attention on some specific topic. 
<section class="flix-infobox flix-infobox--danger" aria-label="Critical infobox">
  <div class="flix-infobox__content">
    This is a very important error message to attract your attention on some specific topic.
  </div>
</section>

Success

flix-infobox--success modifier:

This is a success message. This is awesome! 
<section class="flix-infobox flix-infobox--success" aria-label="Success infobox">
  <div class="flix-infobox__content">
    This is a success message. This is awesome!
  </div>
</section>

Smaller

The small modifiers can be used independently and in combination with the state modifiers.

You can make the inner paddings smaller by adding the flix-infobox--small modifier.

And you can also make the icon smaller by adding the flix-infobox--small-icon modifier.

This infobox is smaller and fits on cozy spaces. 
<section class="flix-infobox flix-infobox--small flix-infobox--small-icon" aria-label="Neutral infobox">
  <div class="flix-infobox__content">
    This infobox is smaller and fits on cozy spaces.
  </div>
</section>

Stronger

To make the infobox more prominent, you can use the flix-infobox--strong modifier. This will add themed state color to the box background.

This infobox has a colorful background. 
<section class="flix-infobox flix-infobox--strong" aria-label="Neutral infobox">
  <div class="flix-infobox__content">
    This infobox has a colorful background.
  </div>
</section>