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.
There are 4 types of infoboxes available:
Neutral
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 flix-space-flush-bottom">
<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/critical
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>Spacing variations
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.
