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).

Dual Colour Textbox:

Learning Objectives

At this end of this module, students should be able to:

learning objective...
learning objective...
learning objective...
learning objective...

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: #f1f3f2;">
        <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>