The highlight molecule is used to pull out informational content to a user. It has an optional abstract texture/shape behind the informational content.


Comparison Desktop


The highlight 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.

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.




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


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