Infobox
The infobox highlights important/very relevant content within a layout.
Neutral message example with a headline
You can put some other rich text HTML inside of infobox as well.
- Like the list for example.
This is a warning message
This is a very important error message to attract your attention on some specific topic.
This is a success message. This is awesome!
<div class="flix-infobox">
<div class="flix-infobox__content">
<h4 class="flix-h4 flix-h4--section-header">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 flix-space-flush-bottom">
<li class="flix-list__item">Like the list for example.</li>
</ul>
</div>
</div>
<div class="flix-infobox flix-infobox--warning">
<div class="flix-infobox__content">
This is a warning message
</div>
</div>
<div class="flix-infobox flix-infobox--danger">
<div class="flix-infobox__content">
This is a very important error message to attract your attention on some specific topic.
</div>
</div>
<div class="flix-infobox flix-infobox--success">
<div class="flix-infobox__content">
This is a success message. This is awesome!
</div>
</div>Details
There are 4 types of infoboxes available:
- neutral (default state);
- warning (
flix-infobox--warningmodifier); - danger/critical (
flix-infobox--dangermodifier); - success (
flix-infobox--success).
Each has 2 spacing variations in place:
- default that has 24px inner spacing on the sides;
- small that has 12px spacing, requires adding
flix-infobox--smallmodifier.
<h#> versus aria-label
If your infobox contains a heading (<h1>, <h2>, etc) it should be enough to identify the infobox section to assistive technologies. But if your infobox lacks a heading, you must add a meaningful aria-label to the section element.
