A card displays structured content similar to a playing card.
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.
- Label (Optional)
- Introduction (Optional)
- Metadata (Optional)
- CTA (Optional)
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.
Card with description
This variant is used to display our career advice. It is a much simpler version with only the title and description.
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.