Important!

Is there something critical? Use this type of alert. To follow accessibility guidelines, make sure you don't rely on color alone to convey meaning. For example, if you use this type of alert as a warning, include a heading explicitly stating "Warning"

Instructor's Note:

Do this!

Templates/Strategies:

Other types of highlighting

Additional Enrichment:

Is there material/resources you want to highlight here that would help the student better understand and process the learning materials?

Reminders:

For reminders to students, such as when they need to be aware of upcoming material or Modules.

Reminders:

For reminders to students, such as when they need to be aware of upcoming material or Modules.

Real-world Application

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt nisi ac aliquet vehicula. Praesent eleifend mollis ante. Curabitur ultricies, sem quis finibus pharetra, diam enim varius metus, eget pharetra quam metus nec tellus. Sed ac facilisis nibh. Cras arcu nisl, blandit id auctor vitae, suscipit a sem. Nullam sit amet urna ullamcorper, ornare ipsum nec, condimentum tellus. Maecenas consequat gravida erat vitae volutpat. Vestibulum dignissim lacus pulvinar, sagittis augue at, tristique dui.

Real-world Application

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt nisi ac aliquet vehicula. Praesent eleifend mollis ante. Curabitur ultricies, sem quis finibus pharetra, diam enim varius metus, eget pharetra quam metus nec tellus. Sed ac facilisis nibh. Cras arcu nisl, blandit id auctor vitae, suscipit a sem. Nullam sit amet urna ullamcorper, ornare ipsum nec, condimentum tellus. Maecenas consequat gravida erat vitae volutpat. Vestibulum dignissim lacus pulvinar, sagittis augue at, tristique dui.

Real-world Application

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt nisi ac aliquet vehicula. Praesent eleifend mollis ante. Curabitur ultricies, sem quis finibus pharetra, diam enim varius metus, eget pharetra quam metus nec tellus. Sed ac facilisis nibh. Cras arcu nisl, blandit id auctor vitae, suscipit a sem. Nullam sit amet urna ullamcorper, ornare ipsum nec, condimentum tellus. Maecenas consequat gravida erat vitae volutpat. Vestibulum dignissim lacus pulvinar, sagittis augue at, tristique dui.

Real-world Application

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt nisi ac aliquet vehicula. Praesent eleifend mollis ante. Curabitur ultricies, sem quis finibus pharetra, diam enim varius metus, eget pharetra quam metus nec tellus. Sed ac facilisis nibh. Cras arcu nisl, blandit id auctor vitae, suscipit a sem. Nullam sit amet urna ullamcorper, ornare ipsum nec, condimentum tellus. Maecenas consequat gravida erat vitae volutpat. Vestibulum dignissim lacus pulvinar, sagittis augue at, tristique dui.

Tips on editing and using a Call-Out Box:

Copy the code that is provided.
Go to the page of the Canvas Course you wish to modify.
Click the Edit button and edit the text directly on the page.
1. First-row bolded words are box titles.
2. The second line is intended to be for the content of the box.
Save your changes and check to make sure your edits are working as intended.

Code

Call-Out Boxes

<div class="alert" style="background-color: #bcdceb; color: #000000; margin: 10px;">
    <h3><strong>Important!</strong></h3>
    <p>Is there something critical? Use this type of alert. To follow accessibility guidelines, make sure you don't rely on color alone to convey meaning. For example, if you use this type of alert as a warning, include a heading explicitly stating "Warning"</p>
</div>

<div class="alert" style="margin: 10px; background-color: #beb4a5; color: #000000;">
    <h3><strong>Instructor's Note:</strong></h3>
    <p>Do this!</p>
</div>

<div class="alert" style="margin: 10px; background-color: #8ca57d; color: #000000;">
    <h3><strong>Templates/Strategies:</strong></h3>
    <p>Other types of highlighting</p>
</div>

<div class="alert" style="background-color: #323232; color: #ffffff; margin: 10px;">
    <h3><strong>Additional Enrichment:</strong></h3>
    <p>Is there material/resources you want to highlight here that would help the student better understand and process the learning materials?</p>
</div>

<div class="alert" style="background-color: #f0f0f0; color: #000000; margin: 10px;">
    <h3><strong>Reminders:</strong></h3>
    <p>For reminders to students, such as when they need to be aware of upcoming material or Modules.</p>
</div>

<div class="alert" style="background-color: #861417; color: #ffffff; margin: 10px;">
    <h3><strong>Reminders:</strong></h3>
    <p>For reminders to students, such as when they need to be aware of upcoming material or Modules.</p>
</div>

<div style="color: #000000; border: 6px solid #861417; border-radius: 12px; margin: 10px; padding: 8px;">
    <h2><span style="font-size: 24pt;"><img id="131093005" role="presentation" src="https://canvas.ou.edu/courses/283336/files/131093005/preview" alt="" width="100" height="100" data-api-endpoint="https://canvas.ou.edu/api/v1/courses/283336/files/131093005" data-api-returntype="File" /></span><span style="font-size: 24pt;">Real-world Application</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt nisi ac aliquet vehicula. Praesent eleifend mollis ante. Curabitur ultricies, sem quis finibus pharetra, diam enim varius metus, eget pharetra quam metus nec tellus. Sed ac facilisis nibh. Cras arcu nisl, blandit id auctor vitae, suscipit a sem. Nullam sit amet urna ullamcorper, ornare ipsum nec, condimentum tellus. Maecenas consequat gravida erat vitae volutpat. Vestibulum dignissim lacus pulvinar, sagittis augue at, tristique dui.</p>
</div>

<div style="border: 6px solid #861417; background-color: #fdf2f2; padding: 10px 14px; margin: 10px; border-radius: 12px;">
    <h2><span style="font-size: 24pt;"><img id="131093005" role="presentation" src="https://canvas.ou.edu/courses/283336/files/131093005/preview" alt="" width="100" height="100" data-api-endpoint="https://canvas.ou.edu/api/v1/courses/283336/files/131093005" data-api-returntype="File" />Real-world Application</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt nisi ac aliquet vehicula. Praesent eleifend mollis ante. Curabitur ultricies, sem quis finibus pharetra, diam enim varius metus, eget pharetra quam metus nec tellus. Sed ac facilisis nibh. Cras arcu nisl, blandit id auctor vitae, suscipit a sem. Nullam sit amet urna ullamcorper, ornare ipsum nec, condimentum tellus. Maecenas consequat gravida erat vitae volutpat. Vestibulum dignissim lacus pulvinar, sagittis augue at, tristique dui.</p>
</div>

<div style="border: 6px solid #000000; background-color: #bcdceb; padding: 10px 14px; margin: 10px; border-radius: 12px;">
    <h2><span style="font-size: 24pt;"><img id="131093005" role="presentation" src="https://canvas.ou.edu/courses/283336/files/131093005/preview" alt="" width="100" height="100" data-api-endpoint="https://canvas.ou.edu/api/v1/courses/283336/files/131093005" data-api-returntype="File" />Real-world Application</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt nisi ac aliquet vehicula. Praesent eleifend mollis ante. Curabitur ultricies, sem quis finibus pharetra, diam enim varius metus, eget pharetra quam metus nec tellus. Sed ac facilisis nibh. Cras arcu nisl, blandit id auctor vitae, suscipit a sem. Nullam sit amet urna ullamcorper, ornare ipsum nec, condimentum tellus. Maecenas consequat gravida erat vitae volutpat. Vestibulum dignissim lacus pulvinar, sagittis augue at, tristique dui.</p>
</div>

<div style="border: 6px solid #000000; background-color: #f0f0f0; padding: 10px 14px; margin: 10px; border-radius: 12px;">
    <h2><span style="font-size: 24pt;"><img id="131093005" role="presentation" src="https://canvas.ou.edu/courses/283336/files/131093005/preview" alt="" width="100" height="100" data-api-endpoint="https://canvas.ou.edu/api/v1/courses/283336/files/131093005" data-api-returntype="File" />Real-world Application</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt nisi ac aliquet vehicula. Praesent eleifend mollis ante. Curabitur ultricies, sem quis finibus pharetra, diam enim varius metus, eget pharetra quam metus nec tellus. Sed ac facilisis nibh. Cras arcu nisl, blandit id auctor vitae, suscipit a sem. Nullam sit amet urna ullamcorper, ornare ipsum nec, condimentum tellus. Maecenas consequat gravida erat vitae volutpat. Vestibulum dignissim lacus pulvinar, sagittis augue at, tristique dui.</p>
</div>