Components for Learning

A single light鈥慴lue, LEGO鈥憇tyle cube with one circular stud on top, shown in a simple isometric illustration on a white background.

The Components for Learning C4L feature in Moodle is a set of pre鈥慸esigned, visual templates that can easily be inserted into module content.

These components help present information in a clear, structured, and engaging way. The visual icons emphasise details while also making your Moodle course appealing and intuitive to use.

The tip component below is an example of how the feature can be used to draw attention to key information.

Tip box displaying the message: 鈥淯se components to break up text and draw attention to key information.鈥�

The website showcases all of the visual components, providing information on use cases, new elements and best practice.

In this guide:

Key areas of component use
How to add components
Component examples

Moodle guides All guides Support & training

Get started with Moodle Manage your participants Structure your course Add content to your course Accessibility in Moodle Communicate and collaborate Assessment and feedback

Assignments

Quizzes

Lessons

Plan and set up a lesson

Tracking progress Rollover, upgrades & known issues

Features

Using Components for Learning:

Supports a consistent course structure and layout
Includes visual elements suitable for most theme designs and accessible on most devices
Provides recognisable, easy to identify designs

Benefits

The components help to:

Reduce cognitive load by presenting information in manageable, meaningful formats
Quickly highlight expectations and guidance
Improve navigation and ease of use

Using the components

Key areas of component use

There are four main uses of the components:

Contextual components 鈥� useful for highlighting reminders, background information, tips, quotations, figures, or reading context.
Procedural components 鈥� ideal for drawing attention to due dates, steps in a process, task guidance, or estimated completion times.
Evaluative components 鈥� used to convey information about feedback, assessment expectations, or grading criteria.
Helper components - provides a piece of content with its own visual context, to make it specific or different.

While the components are divided into key areas, their simple design and easily recognisable visuals allow them to work together seamlessly.

Visit the for a full list of the components, with visuals, use cases and examples.

How to add components

A screenshot of a Moodle text鈥慹ditor toolbar with various icons. One icon, showing a small cube outline which is the C4L icon, is highlighted with a pink border.

You can quickly add Components for Learning into your Moodle course by following these steps:

Open your Moodle course and select the Settings tab.
Scroll down to the Description section.
On the editing toolbar in the TinyMCE text editor, select the C4L content block icon.
A panel will open showing all available components, grouped into the key areas outlined above.
Hover over any component to see a preview of what it looks like.
Click on the component you want to use to insert it into your page.
Edit the component by adding your own text and content.
To add a component to content that is already in the TinyMCE text editor, highlight the content, then click the C4L icon to select the appropriate component.
When you are finished, scroll down and click Save and display at the bottom of the page.