UMA Component Library

Explore the reusable page components available in the UMA Design System and preview how they appear in D2L.

Introduction

How to Use This Page

Instruction: Use the section rail to browse the component library. Each component is displayed at its normal D2L scale so you can see how it will appear on a course page.

Component categories: Page Structure · Content Blocks · Lists & Sequences · Tables

Page Structure

Page Header

Use header to introduce a major course page with a clear title and brief description.

Course Design and Schedule

Learn how your course is organized and prepare for success throughout the term.

Page Structure

Introduction Style

Use this style for a short introduction at the beginning of a page or major section.

This brief introduction helps learners understand the purpose of the page before they begin reviewing the content.

Page Structure

Instruction Style

Use this style when learners need a clear direction before completing a task.

Instruction: Carefully review the syllabus to understand what you will learn, how you will be assessed, and what is expected of you throughout the term.

Page Structure

Typography Style

Use the established heading hierarchy to organize course content clearly and consistently.

H2 – Online Course Structure

Use H2 headings for the main sections of a course page.

H3 – Weekly Learning Modules

Use H3 headings for subsections within a major page section.

H4 – Learn Section

Use H4 headings for smaller groups of related content when another level is needed.

Page Structure

Paragraph Style

Use standard paragraph text for explanations, directions, and supporting course content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Page Structure

Footer Style

Use this on every last of the page

Page Structure

Link Styles

Use the appropriate link type to clearly communicate what will happen when learners select a link.

Live Examples

Standard Link

This is a standard hyperlink.

New-tab Link

Visit Google in a new browser tab.

Download Link

Download the tooltip test file.

Email Link

Email support@example.edu

Telephone Link

Call 1-800-555-1234

Purpose

Provide consistent navigation to pages, websites, downloadable resources, email addresses, and telephone numbers.

Best Practices

Use descriptive link text that clearly communicates the destination or action. Avoid generic phrases such as "Click here".

Behavior

External links automatically display a tooltip indicating they open in a new browser tab. Download links display a download tooltip. Standard, email, and telephone links do not display an automatic helper tooltip.

Content Blocks

Blockquote Style

Use this style for a short quotation that should remain visually connected to the surrounding content.

Professional learners build habits, systems, and standards that support success.

— UMA learning example
Content Blocks

Quote Style

Use this larger quote treatment when a quotation should stand apart as a featured content block.

Professional learners do not just hope to succeed. They build behaviors, systems, and standards that make success more likely.
UMA Learning Experience Example
Content Blocks

Information Blocks

Use these cards to organize Learn, Practice, and Do content.

Learn

Use this area for reading, videos, and instructional content.

Practice

Use this area for ungraded practice activities.

Do

Use this area to direct students to graded D2L activities.

Content Blocks

Callout Blocks

Use callouts to highlight notes, tips, reminders, important information, success messages, and learner support.

Callout blocks help draw attention to important information, reminders, learner support, and instructional guidance. Use these consistently throughout the course to improve readability and learner experience.

 Note

Helpful Context

Use notes to provide additional information, context, explanations, or helpful guidance that supports the learning experience.

Tip

Helpful Advice

Use tips to share best practices, recommendations, shortcuts, or advice that can help students succeed.

Reminder

Don't Forget

Use reminders to highlight important due dates, upcoming activities, or actions students should not forget.

Important

Read Carefully

Use important callouts for required actions, policy reminders, safety information, or other critical content.

Success

You're All Set

Use success callouts to reinforce completed tasks, accomplishments, or positive learner progress.

Need Help?

We're Here to Help

Direct students to technical support, student services, tutoring, or instructor assistance whenever additional help is available.

Content Blocks

Learning Activity Block

Use this block to introduce a practice activity or learner task.

Content Blocks

Reflection Prompts

Use reflection prompts to encourage learners to pause, connect ideas, and think more deeply before continuing. Note: Illustrations are temporary.

Live Examples

Think About It

What do you already know about this topic?

Pause briefly and connect the topic to your existing knowledge or experience.

Reflection

Which concept was most meaningful to you, and why?

Consider how the information connects to your learning, experience, or future professional role.

Consider This

How might your response change in a different situation?

Think through the circumstances, perspectives, or information that could influence your decision.

Purpose

Encourages learners to activate prior knowledge, connect ideas, examine perspectives, or apply what they have learned.

Best Practices

Use one focused, open-ended prompt. Keep the wording brief and avoid questions with an obvious correct answer.

Behavior

The prompt remains visible but does not collect or save a response unless paired with a D2L discussion, assignment, or activity.

Content Blocks

AI Activity Block

Use this block when learners are guided to use AI responsibly for learning support.

Lists & Sequences

Bullet List Style

Use bullet lists for related items that do not need to be completed in a specific order.

  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit.
  • Sed do eiusmod tempor incididunt.
Lists & Sequences

Number List Style

Use numbered lists when sequence or order matters.

  1. Lorem ipsum dolor sit amet.
  2. Consectetur adipiscing elit.
  3. Sed do eiusmod tempor incididunt.
Lists & Sequences

Large Number List Style

Use the large-number treatment when each ordered item needs stronger visual emphasis.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lists & Sequences

Checklist Panel Style

Use panel checklists and X-lists when requirements and cautions should be visually grouped.

  • Review the course structure.
  • Complete the Learn and Practice sections.
  • Check important dates each week.
  • Do not skip required weekly preparation.
  • Do not wait until the last day to complete activities.
Lists & Sequences

Standard Checklist Style

Use standard checklists and X-lists within normal course content.

  • Review the course structure.
  • Complete the Learn and Practice sections.
  • Check important dates each week.
  • Do not skip required weekly preparation.
  • Do not wait until the last day to complete activities.
Lists & Sequences

Completion Checklist

Use this checklist to show the tasks learners should complete before moving forward.

  • Review the course syllabus.
  • Check your weekly schedule.
  • Complete the Learn and Practice sections before class.
  • Use Student Help if you need support.
Lists & Sequences

Step Process

Use this component when learners need to complete a procedure in a specific order.

Live Example

  1. 1

    Review the procedure

    Read the workplace instructions before beginning so the required supplies, documentation, and escalation points are clear.

  2. 2

    Prepare the materials

    Gather only the materials needed for the task and confirm that forms, devices, or labels belong to the correct person or record.

  3. 3

    Complete the task

    Follow the steps in order. Pause when information is missing and ask the appropriate team member before proceeding.

  4. 4

    Document and hand off

    Record the required information and communicate any next steps to the person responsible for follow-up.

Purpose

Breaks a procedure into ordered actions so learners can clearly see what comes first, next, and last.

Best Practices

Begin each step with an action verb and keep the instructions brief. Use one step for each distinct learner action.

Behavior

The complete process remains visible and uses an ordered list so the sequence is preserved on mobile, at high zoom, and in print.

Lists & Sequences

Agenda Layout

Use this component to organize schedules, agendas, or sequential activities in a clean two-column layout.

Live Example

  1. Day 1

    Confirm course access

    Sign in, review the course home page, and confirm that announcements, content, and grades are available.

  2. Day 2

    Review expectations

    Read the syllabus, identify weekly due dates, and note how to contact the instructor or support team.

  3. Day 3

    Set a study routine

    Block time for reading, practice, assignments, and review before the end of the week.

  4. Day 5

    Submit the first deliverable

    Check the file name, upload the required item, and confirm that the submission appears in the course.

Purpose

Presents schedules, agendas, or planned activities in a structured format that is easy for learners to scan.

Best Practices

Use short, consistent labels (such as days, weeks, phases, or times) and keep each description focused on a single activity or topic.

Behavior

Entries remain visible in chronological order and stack responsively for smaller screens while maintaining a clear reading sequence.

Lists & Sequences

Timeline

Use this component to present events, milestones, or activities connected to specific points in time.

Live Example

  1. Day 1

    Confirm Course Access

    Sign in, review the course homepage, and confirm that announcements, content, assignments, and grades are available.

  2. Day 2

    Review Expectations

    Read the syllabus, identify weekly due dates, and note how to contact the instructor or support team.

  3. Day 3

    Set a Study Routine

    Reserve time for reading, practice, assignments, and review before the end of the week.

  4. Day 5

    Submit the First Deliverable

    Check the file name, upload the required item, and confirm that the submission appears in the course.

Purpose

Shows how events, milestones, or activities progress across time.

Best Practices

Arrange entries chronologically, use consistent time labels, and keep each milestone focused on one event.

Behavior

Cards alternate around the center line on wider screens and stack along the left side in narrow D2L views, on mobile, and at high zoom.

Tables

Horizontal Header Table

Use the standard table for structured information that needs clear row-and-column relationships.

Component Purpose Use Case
Intro Block Introduces the page Getting Started, Module Overview
Timeline Shows sequence or schedule Weekly Schedule, Course Flow
Checklist Shows steps students must complete Readiness, Module Tasks
Tables

Vertical Header Table

Use the vertical header table to display property-and-value information in a clean, easy-to-scan format.

Course RT2200 – Digital Imaging
Credits 2.0 Semester Credits
Length 5 Weeks
Delivery Online
Prerequisite RT1410
Tables

Matrix Table

Use the matrix table when both the top row and the left column represent important categories.

Week Learn Practice Do
Week 1 ✓ ✓ ✓
Week 2 ✓ ✓ ✓
Week 3 ✓ ✓ ✓
Week 4 ✓ ✓ ✓