Challenge: Balancing attractive page design with flexible course visualization when there are only 1-3 courses to show the learner.

Current Approach: Custom HTML pages directly linking to the courses.

We have 1 html page with 3 cards (1 for each course) and a dedicated page design (1 page for each course) for the learners to are only supposed to see 1 course.

Desired Outcome: We would like to set up a single HTML page that leverages a course catalog widget (or something similar) to serve our courses up to the learner in a way that is flexible and dynamic. We have tested this but it looks really poor when only 1 course is displayed.

Why Now? We have learners coming into our courses all of the time. As we release new versions of the three courses, we need to keep in-progress learners and older learners in their respective versions while pushing new learners to the new content. With our current approach directly linking to courses via HTML pages is simply not scalable.

Ideally I would love to see a course catalog widget designed to look good for small course catalogs. Something that has more responsive design rules like larger cards - different orientations - simple things that would help smaller catalogs look better on a page.

Anyone else deal with this design challenge? What solutions did you implement?