Skip to main content

Course cards

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

Available
core_course/view-cards

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

Sources

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

A single card: course/templates/coursecard.mustache

Exporter

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

Usage

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

core_course/view-cards

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.

<?php 
    $OUTPUT->get_generated_image_for_id($id);
 ?>