IxDF Design System

“Course Card” Component

Design: zeplin.

The course card features a course image, with the course title laid over the image. The course image is cropped and centered to fit the card’s size.

Below the course card, different information is displayed depending on the state of the course. For instance, in its normal state, a course card displays a countdown timer to the enrollment close date. When a member has enrolled into a course, the course card displays the member’s progress and status updates on lessons.

Unlike article and book chapter cards, course cards only have one size variant on all viewports.

Course card takes 4 column in medium viewport and 3 columns in large viewport.

Course Schedule Card

State: Open Schedule

State: Closed Schedule

Props

  • schedule (required)
    App\Models\Courses\CourseSchedule

    CourseSchedule instance to display.

  • closedCourseHint
    string

    Additional text to show, usually when the course will be reopened.

    Default Value: (empty string)

Usage

@include('components.cards.courseSchedule', [
    'schedule' => $courseSchedule,
])

Course Enrollment Card

Enrollment State: Ongoing

When a member enrolls into a course, the course card changes to display the status of the member’s progress.

If the member is attempting a lesson and has not completed the lesson, the course card shows information on the highest attempted lesson item that is in progress. This happens when the highest attempted lesson item of a course is not the last / second-last lesson item of the lesson.

If the member has completed a lesson and the next lesson is available, the course card displays that to the member. This happens when the highest attempted lesson item is the last / second-last lesson item, and the next lesson is available (this state is currently not available for a preview).

If the member has not made any progress in a course (0 points), the course card will prompt the member to begin the course (this state is currently not available for a preview).

Enrollment state: Completed

When a course is completed, the course card changes to display the Course Certificate and final score. Unlike other course cards, the completed course card shows the full image of the Course Certificate—the image thus has variable height depending on the width of the card.

Props

  • enrollment (required)
    App\Models\Courses\CourseEnrollment

    CourseEnrollment instance to display.

Usage

// Uncompleted Course Enrollment card
@include('components.cards.courseEnrollment--ongoingInPrivateMode', [
    'enrollment' => $enrollment,
])
// Completed Course Enrollment card
@include('components.cards.courseEnrollment--completedInPrivateMode', [
    'enrollment' => $enrollment,
])