Course cards
Course cards are easy to access clickable components used in collections to navigate to the course home page.
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);
?>