4 minutes read
Article prettify: Callout blocks
- Custom Themes
October 29, 2021
You can add colorful blocks to highlight information in the article. We've categorized the colors according to the intent of their use. However, you can use them as you find necessary.
Informational block
HTML code
<div class="note info">
<div class="note-icon">
<em class="fas fa-magic"> </em>
</div>
<div class="note-message">
<h3 class="note-title">Note</h3>
<p class="note-content">
Nam interdum, nunc sed hendrerit suscipit, tellus nibh pellentesque leo,
nec porta magna nibh quis ipsum. Ut venenatis justo posuere, consequat
eros ut, sodales metus. Nam imperdiet urna mauris, at ultricies lectus
porttitor eget. Cras erat enim, placerat non ex id, eleifend vehicula
massa. Mauris semper tellus in leo sagittis vestibulum. Quisque et pretium
leo. Ut ultrices lacinia eros, sit amet semper purus malesuada ut.
</p>
</div>
</div>Confirmation block
HTML code
<div class="note success">
<div class="note-icon">
<em class="fas fa-magic"> </em>
</div>
<div class="note-message">
<h3 class="note-title">Note</h3>
<p class="note-content">
Nam interdum, nunc sed hendrerit suscipit, tellus nibh pellentesque leo,
nec porta magna nibh quis ipsum. Ut venenatis justo posuere, consequat
eros ut, sodales metus. Nam imperdiet urna mauris, at ultricies lectus
porttitor eget. Cras erat enim, placerat non ex id, eleifend vehicula
massa. Mauris semper tellus in leo sagittis vestibulum. Quisque et pretium
leo. Ut ultrices lacinia eros, sit amet semper purus malesuada ut.
</p>
</div>
</div>Warning block
HTML code
<div class="note warning">
<div class="note-icon">
<em class="fas fa-magic"> </em>
</div>
<div class="note-message">
<h3 class="note-title">Note</h3>
<p class="note-content">
Nam interdum, nunc sed hendrerit suscipit, tellus nibh pellentesque leo,
nec porta magna nibh quis ipsum. Ut venenatis justo posuere, consequat
eros ut, sodales metus. Nam imperdiet urna mauris, at ultricies lectus
porttitor eget. Cras erat enim, placerat non ex id, eleifend vehicula
massa. Mauris semper tellus in leo sagittis vestibulum. Quisque et pretium
leo. Ut ultrices lacinia eros, sit amet semper purus malesuada ut.
</p>
</div>
</div>Restriction block
HTML code
<div class="note danger">
<div class="note-icon">
<em class="fas fa-magic"> </em>
</div>
<div class="note-message">
<h3 class="note-title">Note</h3>
<p class="note-content">
Nam interdum, nunc sed hendrerit suscipit, tellus nibh pellentesque leo,
nec porta magna nibh quis ipsum. Ut venenatis justo posuere, consequat
eros ut, sodales metus. Nam imperdiet urna mauris, at ultricies lectus
porttitor eget. Cras erat enim, placerat non ex id, eleifend vehicula
massa. Mauris semper tellus in leo sagittis vestibulum. Quisque et pretium
leo. Ut ultrices lacinia eros, sit amet semper purus malesuada ut.
</p>
</div>
</div>
