Something wonderful is gonna happen!
Intro Root Texts Colors Layout Containers

#Admonitions

A group of notes to claim attention

Admonitions is the term for collectively describing all of the notes, warnings, important and tips. You can add notes, warnings, tips and other "admonitions" elements to make parts of your content stand out or to draw attention to something that should not go unnoticed.

This is a simple admonition note...
This is just TIP admonition...
This is an important admonition...
This is a warning admonition...
<!-- Admonition Note -->
<div class="be-advice be-advice-note">
    <div class="be-advice-title"></div>
    <div class="be-advice-content">This is a simple admonition note...</div>
</div>

<!-- Admonition Tip -->
<div class="be-advice be-advice-tip">
    <div class="be-advice-title"></div>
    <div class="be-advice-content">This is just TIP admonition...</div>
</div>

<!-- Admonition Important -->
<div class="be-advice be-advice-important">
    <div class="be-advice-title"></div>
    <div class="be-advice-content">This is an important admonition...</div>
</div>

<!-- Admonition Warning -->
<div class="be-advice be-advice-warning">
    <div class="be-advice-title"></div>
    <div class="be-advice-content">This is a warning admonition...</div>
</div>

Please note that icons are equivalent css codes and not images themselves. If you need to replace them you can do it directly in the CSS. The titles of the admonitions also come from the CSS but the class .be-advice-title is necessary to call and format them.