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--small
modifier.