Add Cards component to style guide

[shannonwells]

Goal

The purpose of this PR is to add a Card component according to the UX designs.

The Card takes as props

• an icon Svelte component which assumes it's an SVG,
• a background color
• title
• title color
• content (as slot)
• content color
• class (used as extras)

When I changed the bgcolor it seemed odd not to let you change the text color. Since the title text color was different from the card text color, it also seemed you should be able to specify that color as well. The defaults match what is in the design.

Closes #9

• Add Card component with props
• Add a Story that illustrates how to use the component

Steps to Verify:

1. npm run storybook
2. navigate to Features-->Card and verify that the view looks like the screenshot and also matches up with the Figma designs from the Issue

Screenshots (optional):

[shannonwells]

This was a width specified in the Figma design so I added it.

[claireclark1]

Suggested change

	<div class="p-6 card-shadow rounded-xl bg-{bgColor} {$$restProps.class}">
	<div class="p-6 card-shadow rounded-xl bg-cream {$$restProps.class}">

Thinking we degault to cream, then when a user wants to change the color, they can just set the class to the new color that they want and it can override the cream through the restProps.class.

[shannonwells]

I did it this way because the background color as a prop was part of the Issue specification. It does already default to cream, however, I think it's not the best practice to have two background color classes end up in the class list.

[claireclark1]

A couple of suggestions, but overall looking good!

[JoeCap08055]

• Pulled branch, ran storybook
• Test drove new Card component

Looks great!

[claireclark1]

👍🏼