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 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
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
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); ?>