Comparison

Purpose

The comparison molecule presents the user a set of two or more options side by side.

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) and also to pull out informational content.

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

Added by: