Canvas Code Studio

Canvas Code Studio builder

Ad slot · Builder top
Project

Not saved yet

Page details

Strict mode for accessibility.

Content
Optional extras
Canvas-safe · inline CSS only

Quick presets

Instructure button guidelines
  • Use Title Case. Maximum 20 characters per label.
  • Only one Primary button per section of content.
  • Use Success / Danger for grading or destructive actions.
  • Use Primary Inverse only on dark backgrounds.
  • Hover / focus states are stripped by Canvas — resting state shown.
Live preview
Course Homepage
Quality panel
Accessibility
Pass

Meets WCAG 2.1 AA structural checks.

Canvas Compatibility
Pass

Inline CSS only, no scripts or external assets.

UDL Support
Pass

Multiple means of representation present.

Brand Alignment
Pass

Using brand: Neutral Academic.

Review Needed
Pass

No follow-up items flagged.

Canvas HTML output
<div style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.6;color:#1a1a1a;background-color:#ffffff;text-align:left;max-width:100%">
  <header style="background-color:#1f3a5f;color:#ffffff;padding:24px 20px;border-radius:6px;margin-bottom:24px">
    <p style="margin:0 0 4px 0;font-size:14px;opacity:0.85;">
    </p>
    <h2 style="margin:0;font-family:Georgia,serif;font-size:30px;line-height:1.2;color:#ffffff;border:none;padding:0;">
    </h2>
  </header>
  <section style="margin:0 0 24px 0;">
    <h2 style="font-family:Georgia, 'Times New Roman', serif;font-size:26px;line-height:1.3;color:#1f3a5f;margin:0 0 12px 0;border-bottom:2px solid #3b6fa0;padding-bottom:6px">Learning Objectives</h2>
    <p style="margin:0 0 8px 0;">By the end of this course, you will be able to:</p>
    <ul style="margin:0 0 16px 24px;padding:0;color:#1a1a1a">
    </ul>
  </section>
  <section style="margin:0 0 24px 0;">
    <h2 style="font-family:Georgia, 'Times New Roman', serif;font-size:26px;line-height:1.3;color:#1f3a5f;margin:0 0 12px 0;border-bottom:2px solid #3b6fa0;padding-bottom:6px">Your Checklist</h2>
    <ul style="list-style:none;margin:0 0 16px 0;padding:0;color:#1a1a1a">
    </ul>
  </section>
  <section style="margin:0 0 24px 0;">
    <h2 style="font-family:Georgia, 'Times New Roman', serif;font-size:26px;line-height:1.3;color:#1f3a5f;margin:0 0 12px 0;border-bottom:2px solid #3b6fa0;padding-bottom:6px">Key Takeaways</h2>
    <ul style="margin:0 0 16px 24px;padding:0;color:#1a1a1a">
    </ul>
  </section>
</div>
Ad slot · Builder bottom