These colored note boxes can help draw attention to important information in your Canvas pages. Each box meets WCAG 2.1 Level AA accessibility requirements.

Find one you like? Copy the HTML code below it and paste into your Canvas HTML editor.

Grey Note Box with Blue Accent

Matching Style: This note box aligns with the other Grab 'n Go templates, using blue #14325f for the accent bar.

<div style="border-left: 5px solid #14325f; background-color: #f8f9fa; padding: 15px; margin: 20px 0;"> <p><strong>Note:</strong> Replace this text with your own note content.</p> </div>

Yellow Note Box

Note: This yellow note box is perfect for important reminders, tips, or key information you want students to notice.

<div style="border-left: 5px solid #DBC760; background-color: #FFFBE6; padding: 15px; margin: 20px 0;"> <p><strong>Note:</strong> Replace this text with your own note content.</p> </div>

Blue Note Box

Information: This light blue note box is ideal for general information, definitions, or explanations.

<div style="border-left: 5px solid #7DA9E0; background-color: #EBF5FF; padding: 15px; margin: 20px 0;"> <p><strong>Information:</strong> Replace this text with your own informational content.</p> </div>

Green Note Box

Success Tip: This light green note box works well for success strategies, best practices, or positive reinforcement.

<div style="border-left: 5px solid #78C091; background-color: #ECFAEF; padding: 15px; margin: 20px 0;"> <p><strong>Success Tip:</strong> Replace this text with your own success tips or best practices.</p> </div>

Pink Note Box

Important: This light pink note box is effective for important deadlines, requirements, or critical information.

<div style="border-left: 5px solid #E8A0B9; background-color: #FFF0F5; padding: 15px; margin: 20px 0;"> <p><strong>Important:</strong> Replace this text with your own important information.</p> </div>