Start with the Component Library page to identify which components you need. Copy the relevant HTML blocks from the sample pages (module.html, syllabus.html, assignment.html, discussion.html) and replace the SS1000 placeholder content with your course-specific material. All components share the same CSS file — no extra stylesheets needed.
UMA — Future Course Template System
Version 2 Component Library
A reusable design system for D2L Brightspace. Built from SS1000 content analysis. 20 MVP components across 6 page templates — ready to evaluate with real course content.
Start Here
About This Prototype
This is Version 2 of UMA's future course template system. It contains a working component library built on real content identified through Phase 1 IMSCC analysis of SS1000: Student and Career Success 1.
The goal is not to recreate SS1000. The goal is a reusable, scalable design system that any UMA course can use — regardless of program, subject, or modality.
Phase 1 — Complete
Full IMSCC analysis: 60 component patterns identified across 8 categories. 20 MVP components selected for the initial build based on reusability and learner experience value.
Phase 2 — This Build
20 MVP components built into the design system. 6 page templates demonstrate real SS1000 content structured with V2 components. Component Library page provides a live reference.
Phase 3 — Next Steps
Gap analysis on Tier 3 advanced components, full D2L testing, accessibility audit, and pilot migration of one complete SS1000 week into the template.
Navigate
Prototype Pages
Select any page to open it. Each page uses SS1000 content to demonstrate how real course material looks and behaves inside the Version 2 design system.
Reference
Component Library
All 20 MVP components with live examples, tier tags, and usage notes.
Sample PageModule Content Page
SS1000 Week 1 key points page — Academic Identity and Self-Awareness — built with V2 components.
Sample PageCourse Syllabus
SS1000 syllabus content: grading breakdown, course objectives, policies, and ADA requirements.
Sample PageAssignment Page
Week 1 AI Assignment — step flow, due date callout, rubric, and submission help block.
Sample PageDiscussion Page
Week 1 Discussion — alert bar, scenario block, discussion questions, and submission help block.
Phase 1 Revision — New Direction
Week 1 Single-Page Learning Experience
This prototype explores a reduced-click architecture: the student enters the course at Getting Started, then navigates to Week 1 → Learning Materials — a single page that contains the complete week’s learning experience. No separate Module, Learn, Practice, or Do pages. Everything is in one guided scroll.
This answers the question: “If a student entered Week 1, would this feel significantly more modern, organized, and intuitive than the current course experience?”
Start Here
Getting Started
Course orientation page: what the course is, how each week works, and a direct CTA to begin Week 1.
Week 1Learning Materials
The complete Week 1 experience on a single page. Progress steps, 2 module sections with 5 activity cards each, and graded activities at the bottom.
New — Phase 3
Week 2 Course Flow Prototype
This new prototype section demonstrates the familiar UMA/D2L course structure: Week → Module → Learn / Practice / Do. It is built on the existing V2 design system and adds five new reusable components: the week roadmap, flow cards, resource cards, activity rows, and figure cards.
Start at the Week 2 landing page and follow the flow through to the Do summary page.
Week Landing
Week 2: Cellular Biology
Week overview, learning objectives, “This Week at a Glance” roadmap, and Learn / Practice / Do flow cards.
Module LandingModule 1: The Cell
Module overview, objectives, “Why This Matters” clinical connection, and Begin Learn CTA.
Learn DashboardLearn: The Cell
Guided dashboard of 5 activities: key points, video, two readings, and a Clover lesson — each with time estimates.
Key Points PageModule 1 Key Points
Redesigned long-read format using key takeaway callouts, clinical connections, figure cards, and knowledge checks.
PracticeModule 1: Practice
Clean self-assessment page with not-graded alert, resource card, and tip callout.
Do SummaryWeek 2: Do
Discussion (25 pts), Assignment (50 pts), and Test (25 pts) — with due dates and D2L tool note.
Scope
The 20 MVP Components
The Minimum Viable Component Library covers approximately 80% of all course-building scenarios. Components are organized by tier: Tier 1 items are required in every course; Tier 2 items are strongly recommended.
T1
Tier 1
Required in every course
- 1Page Hero Banner
- 2Section Divider
- 3Syllabus Page Template
- 4Module Content Page Template
- 5Learning Objectives Block
- 6Assignment Instruction Block
- 7Discussion Prompt Template
- 8Key Takeaway Callout
- 9Activity Type Labels
- 10Due Date Callout
- 11Accessible Data Table
- 12Submission Help Block
T2
Tier 2
Strongly recommended
- 13Course Outline / Accordion Planner
- 14Bootstrap Accordion
- 15Blue Quote / Emphasis Block
- 16Two-Column Comparison Block
- 17Icon Checklist
- 18Scenario / Context Block
- 19Knowledge Check Card
- 20Notification / Alert Bar
Reference
How to Use This Prototype
Remove the <aside class="sidebar"> element before pasting HTML into D2L's HTML editor. Replace the Google Fonts import in styles.css with D2L's hosted font stack or Typekit if your institution has a license. Verify that all image paths resolve within the D2L course file manager.
Every page uses semantic HTML headings, skip links, ARIA attributes on interactive components (accordions, tabs, knowledge checks), and accessible table patterns with captions and scope attributes. Before deployment, verify that all images have meaningful alt text and that any embedded iframes include a descriptive title attribute.
Ready to explore?
Open the Component Library for a full reference, or jump directly to a sample page to see components in context.