Comparison

Purpose

Presents a comparison (or list) of the benefits of different ways of accessing a course

Example

Comparison Desktop

Description

The Comparison component is primarily used in benefits comparison modules on course description pages, but it's also used in a few other places where learners are encouraged to purchase an upgrade or Unlimited (eg. in-course "access expired" and "extra benefits" pages).

It's also used wherever the old Featurebox molecule was used, since it serves a very similar purpose. This means in a few places (generally where Upgrade or Unlimited access aren't available) it is used to outline the benefits of, eg. paid-for access. In these cases it isn't strictly speaking a comparison, so perhaps the name could be improved?

This module uses CSS Grid for layout. Browsers that don't support Grid will present the boxes in the simpler mobile (single column) layout at all screen widths.

Elements

Variants

Two

In some cases (where free access is no longer available, or the learner is already enrolled - eg. access expired or the in-course extra benefits page) the module is used for a two-way comparison between Upgrade vs Unlimited.

This layout can be achieved via the `--two` modifier.

Comparison Two

One

In a few cases (eg. premium and sponsored courses), this molecule is used to provide a single box.

Functionally this is still quite similar to the other variants - listing benefits - though it isn't, strictly speaking, a comparison.

Comparison One
Live example