Open the page in a browser, right-click, and choose View Page Source. Copy the HTML between <main class="main-content uma-page"> and </main>. Paste into D2L's HTML editor. Remove the sidebar <aside> element — it is for prototype navigation only.
UMA — Future Course Template System
Sample Pages
Assembled examples showing how components combine into complete course pages. These are not components — they are demonstrations of components in context.
About This Section
Components in Context
Each page below demonstrates how individual components from the Component Library are combined to create a real course page. Use these as references when building new course content in D2L Brightspace.
How to Use These Pages
Open any sample page to see live, working components assembled into a realistic course structure. View page source to copy the HTML patterns into your own D2L pages.
Content Is Placeholder
Sample pages use SS1000: Student and Career Success content as realistic filler. Replace all content with your course-specific material before deploying to D2L.
One CSS File
All components and page templates share a single stylesheet. No extra files are needed to use any component from any sample page.
Course Structure
Orientation & Syllabus Pages
Pages that orient students to the course, establish expectations, and provide structural information about policies and grading.
Course Structure
Course Syllabus
SS1000 syllabus content: grading breakdown, course objectives, policies, and ADA requirements — all assembled from reusable components.
View Syllabus → Module PageModule Content Page
SS1000 Week 1 key points page — Academic Identity and Self-Awareness — demonstrating callouts, quote blocks, and knowledge checks.
View Module Page →Graded Activities
Assignment & Discussion Pages
Pages that present graded activities to students — including instructions, due dates, rubrics, and submission help.
Learn & Practice
Content & Self-Assessment Pages
Pages that deliver learning content and ungraded practice activities. These are the core of the student learning experience.
Content Page
Module Key Points
Long-read format using key takeaway callouts, clinical connections, figure cards, and inline knowledge checks. Week 2, Module 1.
View Key Points → Practice PageSelf-Assessment Page
Ungraded practice page with not-graded alert, resource card, flip cards, and tip callout. Week 2, Module 1.
View Self-Assessment → Week PageLearning Materials Page
The complete Week 1 experience on a single page — progress steps, two module sections with activity cards, and graded activities at the bottom.
View Learning Materials → Study ToolFlash Cards Page
A dedicated flip-card study page for vocabulary and concept review. Uses the Flip Cards component in a full-page format.
Reference
Working With Sample Pages
All sample pages use SS1000 content as realistic filler. Replace headings, body text, table rows, and list items with your course-specific material. Keep the surrounding HTML structure intact — only the text content needs to change.
Open the Component Library alongside any sample page. The Component Library shows every component's live preview and CSS class names. Match the visual patterns on the sample page to the components in the library to identify what is being used.
Ready to build?
Open the Component Library for a full reference, or explore the Course Experience section to see how pages fit together into a learner journey.