Skip to main content

Course cards

Course cards are easy to access clickable components used in collections to navigate to the course home page.


How to use course cards

Course cards are rendered using a shared template found in course/templates/coursecard.mustache. They are loaded throught JavaScript or PHP on pages like the user dashboard.

Course cards should always contain an image, if no image is provided by the backend a placeholder image is used. The card image and title should be clickable and should always link you to a course page.

Course cards should always show

  • Course image
  • Course full name
  • Course category
  • If a course is favourited


{ "courses": [ { "viewurl": "https://moodlesite/course/view.php?id=2", "courseimage": "", "fullname": "Mathematics Year One", "isfavourite": true, "coursecategory": "Category 1", "showcoursecategory": true, "visible": true } ] }


A deck of course cards: core_course/view-cards.mustache

A single card: course/templates/coursecard.mustache


The data structure for course cards are provided by the exporter class: course/classes/external/course_summary_exporter.php


Course cards can be used in any place that lists courses, it helps users quickly scan the available content and find a course based on the remembered course image or the course name. Guidelines for using course cards are:

  • Keep them simple
  • Minimize the number of actions on a card
  • Use images smartly

The example below show a deck of cards as used on the starred courses block

{ "courses": [ { "viewurl": "https://moodlesite/course/view.php?id=2", "courseimage": "", "fullname": "Mathematics Year One", "isfavourite": true, "coursecategory": "Category 1", "showcoursecategory": true, "visible": true }, { "viewurl": "https://moodlesite/course/view.php?id=3", "courseimage": "", "fullname": "Health and Safety", "isfavourite": false, "coursecategory": "Business", "showcoursecategory": true, "visible": true }, { "viewurl": "https://moodlesite/course/view.php?id=4", "courseimage": "", "fullname": "French Advanced", "isfavourite": false, "coursecategory": "Languages", "showcoursecategory": true, "visible": true }, { "viewurl": "https://moodlesite/course/view.php?id=4", "courseimage": "", "fullname": "French Year one", "isfavourite": false, "coursecategory": "Languages", "showcoursecategory": true, "visible": true } ] }

Placeholder images

Cards usually don’t really look great without images. That’s why we show a placeholder image when no course image is provided. Placeholder images are rendered in core using a library that generates a uniqueish svg’s from idnumbers.