IxDF UI Kit
ā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\Modules\Course\Models\CourseSchedule
CourseSchedule instance to display.
-
closedCourseHintstring
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\Modules\Course\Models\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,
])