Add missing content on Card component page

[aminalhazwani]

We've been using cards more and more in Firefox products. Let's update the draft https://design.firefox.com/photon/components/card.html so that people using the Sketch Library know how to use this component and what their variations are (see https://github.com/FirefoxUX/photon-library/issues/28).

What we would need is the following content:

• Usage: how, when, where and why to use cards
• Anatomy: what are the elements that compose a card (and a collection of cards)
• Dos & Don’ts: how and how not to style/layout/align those elements
• Patterns: interaction, states, behavior
• Theming: light and dark
• Specs: measurements, text, color, shape and elevations, icons
• Micro copy
• Platforms: do cards look the same on web, desktop, iOS and Android?
• Accessibility: how to make card accessible?

We can put everything in a Google doc to be shared here and once we are all happy move the content to the website.

For reference:

• https://material.io/design/components/cards.html
• http://designsystem.morningstar.com/components/cards.html
• https://polaris.shopify.com/components/structure/card#navigation
• http://www.bbc.co.uk/gel/guidelines/cards

@brassy- feel free to edit if anything is missing 🙂