Reusable building blocks that can be combined to create complete course experiences. Components are organized by category. Journey Green = interactive. Dark Blue = informational.
Foundation
Design standards — typography, color, icons, and global structural elements.
Typography
H1 uses Merriweather 900 (hero only). H2—H4 and all body copy use Roboto. Line lengths are capped at 72ch for readability.
Type scale
H1 · Merriweather 900
Course Title Here
H2 · Roboto 700 · Blue
Section Heading
H3 · Roboto 700 · Navy
Subsection Heading
H4 · Roboto 700 · Navy
Component Label
Body · Roboto 400 · 1rem
The quick brown fox jumps over the lazy dog. Line length is capped at 72 characters for comfortable reading.
Caption · 0.875rem · Muted
Figure 1. Caption text appears below images and media blocks in a smaller, muted style.
Colors
UMA brand palette. Journey Green is reserved for interactive elements. Dark Blue is used for informational content and headings.
Color swatches
Journey Green#15eac4Interactive / CTAs
Legend Blue#0d3553Headings / Dark UI
Hero Blue#1d6ba6H2 / Links / Active
Horizon Blue#0095c8Tips / Secondary
Success#2f7d59Correct / Complete
Warning#f2b84bImportant / Caution
Error#c93f38Danger / Incorrect
Surface Bg#f7f9fbPage background
Icons
Lucide SVG icon set for activity types, media types, and status indicators. Use the .icon-svg class for consistent 22px stroke-based rendering.
Icon set
Learning Path Activities
Learn
Practice
Do
Apply AI
Apply PULSE
Learning Materials
Video
Reading
Assignment
Discussion
Test
Interactive
Audio
Link & Resource Actions
Download
External Link
Information & Support Callouts
Warning
Reminder
Tip
Info
Bookmark
Assessment Icons
Check Square
X Circle
Toggle
Multiple Choice
True or False
Dropdown
Multiple Answers
Click & Reveal
Short Answer
Miscellaneous Icons
User
Users
Search
Layers
Link
Shield
Zap
Hero Banner
Full-width page header. Uses gradient background, H1 in Merriweather, and optional meta tags. One per page.
Live preview
SS1000 — Week 1, Module 1
Transitioning to Professional Learning
Time 45 min
Type Key Points
Graded No
Information Components
Static callouts, alerts, and emphasis blocks. Dark Blue = informational. No hover or interactive states.
Key Takeaway
Navy-bordered callout for the single most important concept in a section. Use sparingly — one per module section.
Live preview
Quote Block
Sage green left-bordered emphasis block with a decorative quote mark and italic text. For impactful quotes or course maxims. Not a standard blockquote.
Live preview
"Professional learners do not just hope to succeed. They build behaviors, systems, and standards that make success more likely."
Callout — Four Types
Four semantic callout variants: Note (green), Tip (Journey Green), Important (gold), Danger (red). Each has a unique icon and color treatment. Note and Tip are informational; Important and Danger require action.
Live previews — all four types
Alert Bar
Full-width notification banner. Use for announcements. Default is orange/amber. The urgent variant (gold) is for deadline warnings and policy alerts.
Live previews
i
Week 2 is now open.
All learning materials for Week 2 are available. Your first submission is due Sunday at 11:59 PM EST.
!
Deadline extended.
The Week 3 assignment deadline has been extended to Tuesday at 11:59 PM EST due to a technical issue.
Scenario / Context Block
Horizon-bordered block for case studies, scenarios, and real-world context. Use before presenting a problem or discussion prompt.
Live preview
Scenario
A radiologic technologist notices that a patient has multiple imaging orders for the same anatomical region within a 30-day period. The referring physician has not provided updated clinical justification.
What steps should the technologist take before proceeding with the examination?
Rapidly dividing cells such as bone marrow, intestinal epithelium, and reproductive cells are more radiosensitive than slowly dividing cells. This principle directly informs radiation therapy dose planning and the occupational exposure limits for health professionals.
Real World Example
Scenario block variant for applied industry examples — connects theory to observable professional behavior.
Live preview
Real World Example
At a busy outpatient imaging center, a technologist who applies ALARA principles reviews each order before positioning — adjusting field size and technique factors to minimize dose while maintaining diagnostic image quality. This habit protects both the patient and the technologist over a career spanning thousands of exposures.
FAQ Block
Accordion-based frequently asked questions. Use to reduce page length while keeping reference content accessible.
Live preview — interactive accordion
All weekly assignments, discussions, and tests are due Sunday at 11:59 PM EST. Late submissions are not accepted without prior instructor approval.
Use the D2L Messages tool to contact your instructor. You can expect a response within 48 hours on weekdays.
Contact UMA Technical Support at 1-800-XXX-XXXX or submit a help ticket through the D2L Help menu. Take a screenshot of any error message before contacting support.
Activity Components
Labels, badges, and metadata elements that identify activity type, grading status, timing, and deadlines.
Activity Type Labels
Four labels — Learn, Practice, Do, Apply AI — that classify every course activity. Practice uses teal to distinguish it from the gold Important callout. Used consistently across all page types.
Live preview — all four types
LearnPracticeDoApply AI
GradedNot Graded
Due Date Callout
Gold-bordered inline badge showing the deadline for an activity or week. Always place near the relevant action.
Live preview
DueSunday, 11:59 PM EST
Estimated Time
Small muted pill showing approximate completion time. Always show next to activity titles on Learn dashboards.
Live preview — typical usage
~20 min~45 min~1.5 hrs
Point Value Badge
Navy pill showing the point value of a graded activity. Used on Do pages and Weekly Activities sections.
Image container with a clearly associated caption. Replace the placeholder with an actual image and add descriptive alt text.
Live preview
[ Image Placeholder ]
Replace with image. Add meaningful alt text.
Figure 1. Diagram of a generalized eukaryotic cell showing major organelles. Adapted from course textbook, Chapter 5.
Video Placeholder (Kaltura)
Standardized 16:9 placeholder for Kaltura-hosted video content. Use this while the actual video is pending; replace with the Kaltura embed when available.
Live preview
Kaltura Video
Introduction to Cell Biology
Replace with Kaltura embed. Include a descriptive title attribute on the iframe.
Image Placeholder
Standardized placeholder for images that are pending final assets. Replace with an <img> tag with descriptive alt text when the asset is ready.
Live preview
Image Pending
Replace with <img> tag. Add meaningful alt text describing the content.
Jumbotron
Large feature block with gradient background for module introductions, welcome messages, or key announcements.
Live preview
Welcome to Radiation Biology
In this course you will explore how ionizing radiation interacts with living tissue — from the molecular level to the whole organism. Your knowledge of these principles will directly inform how you practice as a radiologic technologist.
Navy banner for introducing major page sections or module transitions. Lighter than the hero banner.
Live preview
Module 2: Academic Identity and Self-Awareness
5 activities · ~72 min · All ungraded study resources
Layout Components
Grid and column structures for organizing content. Use the simplest layout that communicates the relationship between items.
Two Column Layout
Equal-width two-column grid. Collapses to single column below 640px.
Live preview
Column A
Content for the left column. Use for side-by-side text or media comparisons.
Column B
Content for the right column. Keep both columns at a similar reading length.
Three Column Layout
Three equal-width columns. Best used for lists of three related items or step overviews.
Live preview
Step 1
Complete all Learn activities in the module.
Step 2
Take the ungraded Practice self-check.
Step 3
Submit graded Do activities by Sunday.
Comparison Panel
Two-column dark panel for contrasting opposing concepts. Navy left, Hero Blue right.
Live preview
Passive Learner
Reads content without engaging
Waits until Sunday to begin
Relies on last-minute review
Professional Learner
Takes notes and connects concepts
Distributes study time across the week
Seeks clarification early
Icon Checklist
Blue-circle check marks for learning objectives and structured lists. More visually engaging than plain bullet lists.
Live preview
Identify the major organelles of a eukaryotic cell and describe their functions.
Explain the structure and function of the cell membrane.
Describe how ionizing radiation affects DNA at the molecular level.
Timeline
Vertical timeline for historical events, sequences, and content chronology. Each item uses a neutral hollow dot, an optional .timeline-date label, a heading, and a description.
Live preview
1895
Discovery of X-Rays
Wilhelm Röntgen discovers X-rays while experimenting with cathode ray tubes, earning the first Nobel Prize in Physics in 1901.
1898
Discovery of Radium
Marie and Pierre Curie isolate radium and polonium, demonstrating that radioactivity is an atomic property — not a surface phenomenon.
1946
ICRP Radiation Protection Standards
The International Commission on Radiological Protection publishes the first formal guidance on permissible dose limits for occupationally exposed workers.
Process Flow / Numbered Steps
Left-bordered numbered step items for multi-step instructions, processes, or procedures.
Live preview
1
Analyze the Order
Review the imaging request for clinical indication, patient history, and prior exams.
2
Verify Patient Identity
Confirm two patient identifiers before positioning — name and date of birth.
3
Apply ALARA Principles
Select the minimum exposure factors required to produce a diagnostic image.
Data Table — 2 Column
Two-column accessible table with navy header row and row headers. Use for term/definition or criterion/description pairs.
Live preview
PULSE Competencies
Competency
What It Looks Like as a Student
Communication
Asking questions early, reading directions carefully, seeking clarification before deadlines.
Professionalism
Meeting expectations, following through, completing work to standard consistently.
Time Management
Planning study time across the week and managing competing responsibilities.
Dynamic Components
Interactive components. Journey Green signals interactivity — borders, icons, and hover states use Journey Green throughout.
Links — Internal, External & Modal
Standard link styling. External links show ↗ indicator with tooltip. Download links show ↓ prefix with tooltip. Media links show an eye indicator and open a placeholder overlay on click — used for videos and images.
Live preview — hover for tooltips, click modal link to open overlay
Single expandable section. Journey Green left border signals interactivity. Click to expand; one open at a time.
Live preview — click to expand
The Law of Bergonié and Tribondeau states that cells are more radiosensitive when they are rapidly dividing, undifferentiated, and have a long mitotic future. This principle explains why cancer cells — which divide rapidly — are targeted in radiation therapy, and why the gonads and bone marrow must be protected during diagnostic imaging.
Accordion — Group (Multi)
Multiple accordion items in one container. Use data-accordion-multi to allow all panels to be open simultaneously.
Live preview — multi-open accordion group
Taking action because your drive comes from within. College requires students to rely on discipline and follow-through even when no one is reminding them what to do.
Recognizing your habits, routines, deadlines, and responsibilities — then creating systems that guide behavior instead of relying only on motivation.
Meeting expectations, following through, and completing work to standard — the behaviors employers expect and that characterize professional practice.
Tabs — Horizontal (3 tabs)
Tabbed content panel. Journey Green active tab with dark navy text. Supports 2—6 tabs. Use arrow keys to navigate between tabs.
Live preview — keyboard navigable
Module 1: Transitioning to Professional Learning — Academic identity, PULSE competencies, and the habits of effective college students. Approximately 65 minutes.
Module 2: Academic Identity and Self-Awareness — Growth mindset, success assessment, and connecting personal identity to academic performance. Approximately 72 minutes.
Module 3: Resources and Support Systems — UMA library, tutoring center, advising, and peer networks available to support your academic journey. Approximately 55 minutes.
Tabs — Vertical (3 tabs)
Side-by-side tab layout. Useful when tab labels are long or content panels need more horizontal space.
Live preview
The eukaryotic cell contains a nucleus, mitochondria, ribosomes, and the endoplasmic reticulum. The nucleus houses DNA and is the primary target for radiation-induced cellular damage.
The phospholipid bilayer regulates what enters and exits the cell. Radiation damage can increase membrane permeability, leading to electrolyte imbalances and inflammation.
Radiation damages DNA via direct effects (direct strand breaks) and indirect effects (free radical generation). The indirect effect accounts for approximately two-thirds of all radiation-induced DNA damage.
Click and Reveal
Native HTML <details> element. Journey Green accent signals interactivity. No JavaScript required — progressively enhanced.
Live preview — click to revealWhat does ALARA stand for?
As Low As Reasonably Achievable. ALARA is the guiding principle of radiation protection that directs practitioners to minimize patient and occupational dose while maintaining diagnostic image quality. It is required by the NRC and forms the ethical foundation of radiologic technology practice.
What is the critical target for radiation injury in a cell?
The nucleus — specifically, the DNA within it. Double-strand DNA breaks (DSBs) are the most critical lesion because they are the least likely to be repaired correctly, potentially leading to mutation or cell death.
Flip Cards
Click or tap to reveal. Front shows the term; back shows the definition. Avoid for critical content — supplement only.
Live preview — click or tap to flip
ALARA
Radiation protection principle
Click or tap to reveal
As Low As Reasonably Achievable — minimize dose while maintaining diagnostic quality.
Radiolysis
Indirect radiation effect
Click or tap to reveal
The ionization of water molecules by radiation, producing hydroxyl free radicals (•OH) that damage DNA.
Bergonié & Tribondeau
Radiosensitivity law
Click or tap to reveal
Cells are most radiosensitive when rapidly dividing, undifferentiated, and with a long mitotic future.
Hotspots
Image with positioned numbered markers and a legend below. Current implementation is static. Interactive click-to-reveal functionality is planned for future development.
Static display — replace placeholder with image
Planned for Future Development
Interactive click-to-reveal hotspots will allow learners to click markers and view pop-up definitions. Current view shows the static labeled state.
[ Cell Diagram — Replace with actual image ]123
1Nucleus — Primary radiation target; contains DNA. Double-strand breaks are the most critical lesion.
2Mitochondria — Energy center; radiation disrupts function and increases reactive oxygen species.
3Cell Membrane — Phospholipid bilayer; radiation can increase permeability via lipid peroxidation.
Assessment Components
Self-check and formative assessment elements. All are ungraded unless deployed through a D2L Quiz tool. Immediate feedback where applicable.
Multiple Choice
Single-correct-answer question with immediate feedback. Journey Green icon signals interactivity. Resets with "Try again" button.
Live preview — click an answer
Knowledge Check
Which organelle is considered the primary critical target for radiation-induced cellular damage?
True / False
Two-option multiple choice for true/false statements. Uses the same knowledge-check pattern with two answer choices.
Live preview — click an answer
True or False?
The indirect effect of ionizing radiation accounts for approximately two-thirds of all radiation-induced DNA damage.
Dropdown Selection
Native select element for fill-in-the-blank or classification questions. Accessible without JavaScript.
Live preview — select an answer then click Check
Fill in the Blank
Cells that are rapidly dividing are considered __________ to radiation damage.
Short Answer
Open-ended text area for reflection questions. Not graded in this implementation — responses are local only.
Live preview
Reflection Question
In your own words, explain why the nucleus is considered the most critical target for radiation-induced cellular damage.
Matching Activity
Term—definition pairs with Journey Green connectors. Current implementation is a static visual display. Interactive drag-and-drop matching is planned for future development.
Static display — term to definition
Planned for Future Development
Interactive drag-and-drop matching will replace this static display. Current view shows the matched state for reference.
Nucleus
→
Primary radiation target; houses DNA
Radiolysis
→
Ionization of water by radiation
ALARA
→
As Low As Reasonably Achievable
Check All That Apply
Multiple-correct-answer question. Validates selections on submit, highlights missed correct answers in yellow, and provides a “Try again” reset button.
Live preview — select answers then check
Check All That Apply
Which of the following are examples of highly radiosensitive cells?
Select all that apply, then click Check Answers.
Sorting Activity
Drag-and-drop categorization activity. Current implementation is a static visual display showing the sorted state. Interactive drag-and-drop is planned for future development.
Static display — shows sorted state
Planned for Future Development
Interactive drag-and-drop sorting will allow learners to drag items into the correct categories. Current view shows the completed sorted state for reference.
Sort these cell types by radiation sensitivity.
High Sensitivity
Bone marrow cells
Intestinal epithelium
Reproductive cells
Low Sensitivity
Nerve cells
Muscle cells
Drag-and-drop interaction planned for Phase 5.
Navigation Components
Orientation and wayfinding components. Journey Green signals clickable navigation elements.
On This Page Navigation
Jump-link row anchored to page sections. Scrolls smoothly on click. Active section highlights automatically on scroll.
Live preview
Quick Links Grid
Icon-centered clickable cards for common destinations. Journey Green hover border signals interactivity.
Hierarchical location indicator showing the path to the current page. Use at the top of deeply nested pages.
Live preview
Week Roadmap
Horizontal flow showing a week's learning path: Module → Learn → Practice → Do. Each step is a clickable destination.
Live preview
Module 1The Cell
5 activities · ~65 min
→
Learn5 Activities
Video · Reading · Key Points
→
PracticeSelf-Assessment
Not graded · ~30 min
→
Do3 Graded Items
Discussion · Assignment · Test
Resource Components
Cards for presenting learning resources. Journey Green left border on all interactive resource cards.
Resource Cards — All Types
Modular resource cards for video, reading, download, external, and tool links. Left border color varies by type.
Live preview — five variants
Video14 min
Video Lesson: Cell Structure & Radiation
Instructor-recorded walkthrough of eukaryotic cell anatomy with focus on the nucleus as the primary radiation target.
Reading20 min
Chapter 5: Overview of Cell Biology
Required textbook reading. Covers cell theory, organelle structure, and the cell membrane. Focus on Sections 5.1—5.4.
DownloadPDF
Week 2 Study Guide
Printable summary of Module 1 and Module 2 key concepts, tables, and vocabulary. Helpful for test preparation.
ExternalReference
NRC — ALARA Principles
Official Nuclear Regulatory Commission guidance on ALARA radiation protection for occupationally exposed workers. Opens in a new tab.
Interactive~10 min
Clover Lesson: Cell Biology Review
Interactive lesson with labeled diagrams and embedded review questions. Reinforces reading comprehension before Practice.
AI Components
Prototype
Purple-accented components for AI-assisted learning activities. Visual distinction signals the AI-powered nature of these interactions.
AI Practice Activity
Guided AI interaction with a clear task prompt and response area. Students interact with an AI tool and bring results back to the course.
Live preview
AI —AI Practice Activity
Explore Your Career Pathway
Use an AI tool (such as ChatGPT or Claude) to explore career pathways in your program area. Ask the AI to describe three specialization options, the typical daily responsibilities, and the educational requirements for each.
Copy your AI conversation results and paste them into the response area below, then reflect on what surprised you.
AI Reflection Prompt
Open-ended AI-assisted reflection with a guiding prompt. Student generates a response using AI, then adds their own interpretation.
Live preview
AI —AI Reflection Prompt
Reflect on Your Learning Style
Ask an AI tool: "What are the characteristics of a professional learner, and how do they differ from a passive student?" Read the response, then write 2—3 sentences describing how the AI’s response connects to your own academic experience so far.
AI Ethics Callout
Transparent disclosure about AI use expectations in the course. Required wherever AI tools are used in graded activities.
Live preview
AI —AI Use Policy
Using AI in This Activity
This activity encourages you to use AI tools as a starting point — not a final answer. You are expected to read, evaluate, and reflect on what the AI produces. Simply pasting AI output without adding your own thinking will not meet the assignment requirements.
All AI-assisted submissions must be disclosed. See the course syllabus for the full AI use policy.
AI Scenario Exercise
Structured scenario where the student uses AI to analyze a clinical or professional situation, then evaluates the AI output.
Live preview
AI —AI Scenario Exercise
AI-Assisted Case Analysis
Scenario
A patient is scheduled for a chest X-ray and abdominal CT on the same day. The ordering physician has not noted clinical justification linking the two studies.
Ask an AI tool to identify the relevant radiation protection considerations and what a radiologic technologist should do before proceeding.
After reviewing the AI response, write 2—3 sentences evaluating whether the AI’s answer was accurate and complete based on what you have learned in this course.
AI Discussion Prompt
AI-seeded discussion starter where students compare AI-generated answers to their own understanding and peers’ responses.
Live preview
AI —AI Discussion Prompt
Week 1 AI Discussion: Academic Identity
Before posting, ask an AI tool: "What does it mean to have a strong academic identity as an adult learner returning to school?"
In your initial discussion post:
Share one thing the AI said that resonated with you.
Share one thing the AI missed or got wrong from your own experience.
Describe what you believe your academic identity is at the start of this course.
AI Feedback Box
Placeholder container for AI-generated formative feedback. Requires backend integration — shown here as a design pattern only.
Design pattern — requires integration
Planned for Future Development
AI Feedback requires backend API integration (Anthropic or OpenAI). This is a design placeholder showing the intended visual layout only.
AI —AI Feedback
Feedback on Your Response
AI-generated feedback will appear here after you submit your response. This component requires backend API integration and is shown as a design placeholder.
Integration RequiredConnect to Anthropic or OpenAI API. See AI Components documentation for integration guidance.
Video Placeholder
This is where an embedded video or image would appear in production. Connect to a video platform (Kaltura, YouTube, Panopto) or CMS asset URL.