CalloutCSS
Below are examples of the types of callouts you can add to your website with CalloutCSS.
Basic Callouts
The basic callouts have three types; note, warning
and danger which come in blue, yellow and red
respectfully.
The design of the basic callout has a left border with a stronger
instance of the callout colour. The form of the basic callout are
<TYPE-callout>...</TYPE-callout>.
Below are examples of the basic callouts:
Note
<note-callout>
An example of a NOTE callout
</note-callout>
Warning
<warning-callout>
An example of a WARNING callout
</warning-callout>
Danger
<danger-callout>
An example of a DANGER callout
</danger-callout>
Full Border Callouts
You can choose decorate your callouts with a full border style by
using <TYPE-callout-full>...</TYPE-callout-full>
Below are examples of the full border callouts:
Note
<note-callout-full>
An example of a NOTE callout
</note-callout-full>
Warning
<warning-callout-full>
An example of a WARNING callout
</warning-callout-full>
Danger
<danger-callout-full>
An example of a DANGER callout
</danger-callout-full>
Prefix Keywords
You may choose to have the callout type or any other keyword as a
prefix for
the callout. You can add the <strong>Keyword</strong>
formatting to the callout to grab the user's attention further.
Below are examples of using the keyword prefix:
<note-callout>
<strong>NOTE:</strong> An example of a NOTE callout
</note-callout>
<warning-callout-full>
<strong>WARNING:</strong> An example of a WARNING callout
</warning-callout-full>
<danger-callout-full>
<strong>ISSUE 1:</strong> An example of a DANGER callout
</danger-callout-full>