Article callouts are a powerful way to highlight key information within an article to your users. They are also sometimes called notification boxes. Use them for pointing out helpful tips, important warnings or critical information that requires extra attention.
How to use
Astro Theme has 4 different callouts available to use:
- Standard Callout
- Amber Callout
- Green Callout
- Red Callout
To use these in your article follow one of the setup options below:
- Option 1: Copy the whole box shown below > paste it into your article and edit the text with the article editor
-
Option 2: Copy the below code, and paste the code into the source code option within the article.
- You can access the Source Code via the Source Code button within the Article WYSIWYG editor. Example Below:
-
NOTE: Callout boxes will not appear directly in the article editor but will show on the published article.
Examples to copy
Standard Callout Example text to be shown.
<div class="callout">
<span><strong>Standard Callout</strong> Example text to be shown.</span>
</div>
Amber Callout Example text to be shown
<div class="callout amber">
<span><strong>Standard Callout</strong> Example text to be shown.</span>
</div>
Green Callout Example text to be shown
<div class="callout green">
<span><strong>Standard Callout</strong> Example text to be shown.</span>
</div>
Red Callout Example text to be shown
<div class="callout red">
<span><strong>Standard Callout</strong> Example text to be shown.</span>
</div>