Version 2 — Reference

Component Library

  • Components 20 MVP
  • Tiers T1 Required & T2 Recommended
  • Content SS1000 examples

Every component below is live — no screenshots. Tier 1 components are required in every course. Tier 2 components are strongly recommended. Each entry shows the component name, a one-line description, the tier and priority tag, and a real preview using SS1000 content where applicable.

Page Structure Components

Components that establish the frame of every course page.

1 — Page Hero Banner

Full-width page header with title in H1. Two variants: gradient-text (used here) and image-banner (used on module pages). Anchors the brand on every page.

Tier 1 High Priority
Live preview

Week 1 — Module 1

Transitioning to Professional Learning

  • Type Learn
  • Time 45 min
  • Points Ungraded

2 — Section Divider

Semantic H2 heading with kicker label. Separates major content regions on any page. Requires correct heading hierarchy — never skip levels.

Tier 1 High Priority
Live preview

Outcomes

Course Objectives

9 — Activity Type Labels

Four pill-shaped labels — Learn, Practice, Do, Apply — that organize all course activities. The structural spine of every module. Students know exactly what kind of work to expect before they open the item.

Tier 1 High Priority
Live preview — all four types
Learn Practice Do Apply

Used in the module navigation sidebar and on module overview pages to label each activity's type and graded status.

5 — Learning Objectives Block

Numbered course objectives with indented sub-objectives. Required by accreditation standards — every module page must have at least one objective. Use <ol> for numbered lists, not styled divs.

Tier 1 High Priority
Live preview — SS1000 Week 1 objectives

Upon completing this module, you will be able to:

  1. CO1 — Identify strategies to maximize the UMA learning experience.
    • 1.1 Describe key academic resources available at UMA.
  2. CO2 — Develop strategies to increase self-awareness.
    • 2.1 Analyze personal learning behaviors and environmental factors that impact academic performance.

10 — Due Date Callout

Inline deadline notice. Always placed near the submission action — not buried at the top of long instructions. Uses bold text and a colored border, never color alone.

Tier 1 High Priority
Live preview
Due Sunday at 11:59 PM EST

Callouts & Alerts

Visual containers that draw attention to important content. Each type has a distinct color, icon, and label.

Callout System — Four Types

Info, Tip, Important, and Danger. Each uses a distinct left-border color, background tint, icon, and label. Never use color as the only differentiator — the label must always be present.

Tier 1 High Priority
Live preview — all four types

8 — Key Takeaway Callout

A distinct callout variant that closes every major content section. Used ~10 times per course in the SS1000 source. The navy color and larger body text signal "this is the essential message." Use sparingly — one per major section.

Tier 1 High Priority
Live preview — SS1000 AI page example

15 — Blue Quote / Emphasis Block

Light-blue centered container for a single high-impact statement. Functions as a visual pause in long content pages — learners recognize it as a signal to slow down and read carefully. Most-used design element in SS1000 content pages.

Tier 2 High Priority
Live preview — SS1000 Week 1 opening quote

Professional learners do not just hope to succeed. They build behaviors, systems, and standards that make success more likely.

20 — Notification / Alert Bar

A horizontal attention bar for time-sensitive or high-priority communication. Two variants: standard (blue) and urgent (gold). Used at the top of every discussion page in SS1000 to communicate initial post due dates.

Tier 2 Medium Priority
Live preview — standard and urgent variants
Discussion Instructions

Read the Discussion Instructions and Reminders before posting. Initial post due Wednesday at 11:59 PM EST.

Assessment Window Open

Week 3 Assessment is open now through Sunday at 11:59 PM EST. Two attempts allowed.

Content Layout Components

Structural patterns for organizing instructional content within a page.

16 — Two-Column Comparison Block

Side-by-side columns for contrasting two concepts, behaviors, or approaches. Collapses to a single column on mobile. One of the highest-impact instructional patterns in SS1000 — used for Student A vs. Student B, AI Can vs. AI Should Not, and PULSE competency comparisons.

Tier 2 High Priority
Live preview — SS1000 Student A vs. Student B

Student A

Treats school like high school.

Waits for reminders, starts projects late, submits work only when prompted, and studies right before tests.

Student B

Treats learning like a job.

Schedules study time, starts assignments early, turns in work before deadlines, and contacts the instructor when questions come up.

The difference is not intelligence. It is behavior.

13 & 14 — Accordion / Course Outline Planner

Collapsible panels for chunking long content. Default mode opens one panel at a time. Multi mode (add data-accordion-multi) allows multiple open simultaneously — used for policies. Used 25+ times in SS1000 across the Course Outline and PULSE pages.

Tier 2 High Priority
Live preview — SS1000 PULSE competencies

11 — Accessible Data Table

Every table must have a <caption>, <th> with scope attributes, and be wrapped in .table-wrapper for horizontal scroll on mobile. Required in every syllabus, outline, and assignment rubric.

Tier 1 High Priority
Live preview — SS1000 grading breakdown
SS1000 grade distribution by category
Category Weight Activity Types
Discussions30%Weekly discussion boards (5 total)
Assignments25%AI and PULSE worksheets (10 total)
Assessments45%Weekly quizzes and interactive videos

17 — Icon Checklist

Unordered list with blue checkmark circles. Replaces dense paragraph text containing list information. The icon color and circle are decorative — the text carries full meaning for screen readers.

Tier 2 High Priority
Live preview — SS1000 success assessment areas
  • Your behaviors and habits
  • Your intentions and actions
  • Your strengths and areas for growth
  • Your learning environment
  • Your work and family responsibilities
  • Your technical skills and support system

Interactive Components

Components that require learner action or embed active-learning moments inside content pages.

19 — Knowledge Check Card

A card wrapper that signals an active-learning pause. Appears 4 times per week in SS1000 (20 total). The card shell is reusable with any interactive content — LTI embeds, knowledge checks, polls, or reflections. Always labeled as ungraded.

Tier 2 High Priority
Live preview — knowledge check with immediate feedback
Practice — Ungraded

Think About It: Academic Identity

Which statement best describes a student with a strong professional academic identity?

Reflection Prompt Block

A metacognitive pause component with a brief prompt and an optional unsubmitted text area. Differentiates passive reading from active engagement. Labeled clearly as not submitted — reduces student anxiety.

Tier 2 Medium Priority
Live preview — SS1000 Week 1 reflection

Reflect

Are your current study behaviors aligned with the kind of learner you want to become? Write 2–3 sentences connecting the reading to your own experience.

Tabbed Content Panel

Full ARIA tab pattern with keyboard navigation (arrow keys, Home, End). Organizes parallel content into a single section without creating additional pages. Ideal for AI vs. PULSE strands, Learn vs. Practice vs. Apply views.

Tier 2 High Priority
Live preview — three-tab example

Learn activities introduce new concepts through readings, key points pages, and e-book chapters. These are ungraded but required for success on assessments.

Assignment & Discussion Components

Patterns used inside assignment and discussion pages to communicate tasks, due dates, and submission guidance.

18 — Scenario / Context Block

A narrative block that sets a real-world context before a task or discussion prompt. Highest learner-experience value pattern in the entire SS1000 course. Scenario-based learning increases engagement and transfer of knowledge to professional settings.

Tier 2 High Priority
Live preview — SS1000 Week 1 Discussion scenario
Scenario

Luis just started his pharmacy technician program and also works evenings at a retail pharmacy. During a busy shift, prescriptions are backing up, customers are frustrated, and the pharmacist asks Luis to help prioritize tasks. Luis hesitates. He wants to help, but he is unsure what to do first.

Later, the pharmacist tells him: "In this role, you cannot wait until things feel clear. You need systems. You need to act based on priorities, not pressure." That night, Luis logs into his course and looks at his assignments. He realizes he has the same problem there.

6 — Assignment Instruction Block / Step Flow

Sequential numbered steps for graded task instructions. Uses the Step Flow component to make order and dependency visually explicit. Every step has a bold action verb followed by clear context. Reduces instructor inbox volume by front-loading clarity.

Tier 1 High Priority
Live preview — SS1000 Week 1 AI Assignment steps

Open the worksheet

Click the link to open the AI Reflection & Application worksheet PDF in your browser.

Download and save a copy

Save the PDF to your device before filling it in. Choose a location you can find again, such as your Downloads folder or Desktop.

Complete the worksheet

Open your saved copy and complete all sections using an AI tool of your choosing. Save your work regularly.

Submit your file

Upload the completed worksheet using the Submit Assignment button. Due Sunday at 11:59 PM EST.

12 — Submission Help Block

A compact gray help block with step-by-step LMS submission instructions. Appears at the bottom of every assignment and discussion page — 16 total instances in SS1000. Reduces first-time submission confusion for new online learners.

Tier 1 High Priority
Live preview — file upload variant
Need help submitting?
  1. Select Add a File.
  2. Select My Computer.
  3. Select Upload to browse files on your device.
  4. Locate and click the file you want to submit.
  5. Select Open, then select Add, then select Submit.

Note: You will receive a confirmation email when your submission is received.

7 — Discussion Prompt Template

Standard layout for discussion board pages: alert bar with due date, discussion overview header, scenario or prompt body, numbered questions, and submission help block. Consistent structure in all 5 weekly discussions in SS1000.

Tier 1 High Priority
Live preview — discussion overview block
Important

Initial post due Wednesday at 11:59 PM EST. Reply to two classmates by Sunday at 11:59 PM EST.

Discussion Overview

Week 1 — Academic Identity and Self-Awareness

Discussion Questions

  1. Based on the scenario, how would you describe your current academic identity? What is the biggest gap between what you intend to do and what you actually do?
  2. Using your success assessment, identify one strength and one growth area. What specific system will you use to improve?

See it all in context

Every component above appears in a real sample page. Navigate to any page to see how components combine into a full course experience.

Sample Module Page Sample Discussion