Card

Purpose

A card displays structured content similar to a playing card.

Example

Cardwithfulldetail Medium
Cardwithfulldetail Mobile

Description

We're using cards for displaying our courses, programs, degrees and career advice. Our Card grids by default use the `CardWithFullDetail` variant which is used predominately for courses. On mobile devices, the CTA stretches to full width. When we display a collection of cards we also use the Card Grid molecule.

Elements

Variants

Large card

The large card is used in various places:

  • to give emphasis to a course, such as where we promote a course within a grid
  • to stand on it's own page to highlight a particular course (such as when inviting a learner to a course via a shared link)
  • to differentiate degrees from other learning types

In desktop and tablet views, the image is 50% of the width of the module and when in mobile view, it becomes 100% of the width and sits at the top of the content block effectively becoming a normal course card.

Landscape Card Medium
Landscape Card Large

Card with description

This variant is used to display our career advice. It is a much simpler version with only the title and description.

Cardwithdescription Medium
Cardwithdescription Mobile

Medium Card

Medium card is currently used to differentiate programs from other learning types.

Medium card has an optional feature of a slide out description which can be turned on and off, currently medium card is used for programs and has the slide out on as a default for desktop view and turned off for mobile view.

mediumcard-small
mediumcard-large-after.png
mediumcard-large-before.png
Live example

Added by: