Card components [fixes #765]

[carlfairclough]

Adds a card and card list component

Description

Cards

Cards can now be created which accept the following:

• level: optional, Number, default: 3 defines the h# tag for the card

• header: optional, String pass either a link to an image, or an emoji here

• hero: optional, Boolean, default: false if an image is passed to the card, this will display it as a hero

• leftimg: optional, Boolean, default: false if an image is passed to the card, this will display it in a left column

• title: required, String the title

• content: required, String the text under the subtitle

• link: optional, Object

  • to the url
  • text the text to display

• button: optional, Object or Array of 2 items

  • to the url
  • text the text to display

• clickable: optional, Boolean, default: true This toggles whether the card is clickable

link and button are mutually exclusive
leftimg and hero are mutually exclusive

Card List

• items: required, Array an array of objects with card properties
• level: optional, Number, default: 3 defines the h# tag for the cards
• desktopColumns: optional, default: 3 the number of columns on desktop
• tabletColumns: optional, default: 3 the number of columns on tablet
• smallTabletColumns: optional, default: 2 the number of columns on small tablets/large phones
  For small mobile devices, one column is always displayed.

Related Issue

#765

Screenshots (if appropriate):

[samajammin]

Looks good - added a few comments.

I love your screenshot examples - could you please add those as examples to the /style-guide/? Seeing these different variations in action would help me understand the functionality.

[samajammin]

This looks great. Once #839 is merged, let's add a section to the style guide with the examples you displayed in your screenshot.