Callout Boxes

Callout boxes can be used to organize content (especially that which is heavily text-based) and can be a good way to visually separate blocks of content, and call the learner to a specific action. They work well as a cue for when you want to change the modality of learning (e.g., from passively reading text, to actively engaging in some sort of follow-up task), or to flag really important content that you want to make sure the learners do not miss.

Be careful with your colour choices; if the contrast between the background colour and the text colour is not high enough, it can be difficult to read and/or cause accessibility issues. To make sure you are compliant with WCAG accessibility requirements, check your work with a WCAG colour checker tool (e.g., the WCAG Color contrast checker Chrome extension Links to an external site.).

---

Dual Colour Textbox:

Code snippet:

<div>
    <h2 style="margin-bottom: 0; padding: 10px; border-radius: 0; border-style: none; border-width: 0; color: #ffffff; background: #0B6A41;"><strong>Learning Objectives</strong></h2>
    <div style="margin-bottom: 1.35em; padding: 20px; border-radius: 0; border-style: none; border-width: 0; color: #000; background: #d6d6d4;">
        <p>At this end of this module, students should be able to:</p>
        <ol>
            <li>learning objective...</li>
            <li>learning objective...</li>
            <li>learning objective...</li>
            <li>learning objective...</li>
        </ol>
    </div>
</div>

---

Simple Box with Border:

Code snippet:

<div style="border: 3px solid #0B6A41; padding: 15px; background: #eee;">
    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
    <p style="text-align: left;">Put the content of the box here.</p>
</div>

---

Minimalist Box:

Code snippet:

<div style="border-left: 8px solid #0B6A41; padding: 15px; background: #eee;">
    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
    <p style="text-align: left;">Put the content of the box here.</p>
</div>

---

Box with Rounded Corners and Left-Right Margins:

Code snippet:

<div style="background-color: #e1edcc; margin: 0px 20px 0px 20px; padding: 15px; border-radius: 15px;">
    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
    <p>Put the content of the box here.</p>
</div>

---

Alert Box - Success:

See more icon options on the HTML Icons page.

Code snippet:

<div class="alert alert-success" style="margin: 0px 0px 12px;" role="alert">
    <table>
        <tbody>
            <tr>
                <td style="border-right: 1.5px dotted #0d8a13; padding-right: 15px;"><i class="icon-complete"></i></td>
                <td style="padding-left: 15px;">
                    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
                    <p style="margin-top: 0px;">Put the content of the box here.</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

---

Alert Box - Info:

See more icon options on the HTML Icons page.

Code snippet:

<div class="alert alert-info" style="margin: 0px 0px 12px;" role="alert">
    <table>
        <tbody>
            <tr>
                <td style="border-right: 1.5px dotted #0078bd; padding-right: 15px;"><i class="icon-info"></i></td>
                <td style="padding-left: 15px;">
                    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
                    <p style="margin-top: 0px;">Put the content of the box here.</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

---

Alert Box - Warning:

See more icon options on the HTML Icons page.

Code snippet:

<div class="alert alert-warning" style="margin: 0px 0px 12px;" role="alert">
    <table>
        <tbody>
            <tr>
                <td style="border-right: 1.5px dotted #c5451e; padding-right: 15px;"><i class="icon-warning"></i></td>
                <td style="padding-left: 15px;">
                    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
                    <p style="margin-top: 0px;">Put the content of the box here.</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

---

Alert Box - Danger:

See more icon options on the HTML Icons page.

Code snippet:

<div class="alert alert-danger" style="margin: 0px 0px 12px;" role="alert">
    <table>
        <tbody>
            <tr>
                <td style="border-right: 1.5px dotted #e11e2b; padding-right: 15px;"><i class="icon-flag"></i></td>
                <td style="padding-left: 15px;">
                    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
                    <p style="margin-top: 0px;">Put the content of the box here.</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

---

Alert Box - Info (alternate style):

See more icon options on the HTML Icons page.

Code snippet:

<div style="border: 1px solid #377ea3; padding: 15px; margin-top: 15px; margin-bottom: 15px; background: #f6fafc; color: #26749dff;">
    <p><i class="icon-info"></i> Put the content of the box here.</p>
</div>

Shadow Call Out Box</h2

<div style="width: 85%; margin: 20px 15% 20px 10%; background-color: #30759b;">

<div style="position: relative; top: -10px; left: -10px; padding: 15px; background: #ffffff; border: 2px solid #30759b;">

<p><span>TEXT GOES HERE</span></p>

</div>

</div>