Course cards

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

Available

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

Example

core_course/view-cards

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

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

{
    "courses": [
        {
            "viewurl": "https://moodlesite/course/view.php?id=2",
            "courseimage": "https://placekitten.com/300/500",
            "fullname": "Mathematics Year One",
            "isfavourite": true,
            "coursecategory": "Category 1",
            "showcoursecategory": true,
            "visible": true
        },
        {
            "viewurl": "https://moodlesite/course/view.php?id=3",
            "courseimage": "https://placekitten.com/330/500",
            "fullname": "Health and Safety",
            "isfavourite": false,
            "coursecategory": "Business",
            "showcoursecategory": true,
            "visible": true
        },
        {
            "viewurl": "https://moodlesite/course/view.php?id=4",
            "courseimage": "https://placekitten.com/360/500",
            "fullname": "French Advanced",
            "isfavourite": false,
            "coursecategory": "Languages",
            "showcoursecategory": true,
            "visible": true
        },
        {
            "viewurl": "https://moodlesite/course/view.php?id=4",
            "courseimage": "https://placekitten.com/360/400",
            "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.

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