Card

The Card Component is designed to frame and call attention to content and drive traffic through graphic means. A button or text CTA is built into the card to navigate users to internal or external links.

The Card is a flexible-width rectangle defined with a themed background color. Alternatively, the background can be filled with a image. 

The content within the rectangle is centered. There are three variations to the card. 

Simple Card

In the Simple Card, there is the option to add a Style icon at the top, followed by an headline, a brief description, and then a button. 

Hover Card

The Hover Card is similar to Variation 1 with the difference being that there is a hover state. The button call-to-action appears only on hover.

Expandable Card

The Expandable Card has the option to add a fixed size image to the top portion of the card which does not scale when browser window is resized. The image has 15px padding and is inset within the larger rectangle. Titling type is used underneath the image, followed by a headline. In this variation, a text link is used instead of a button. 

Given three variation choices, the card is flexible in shaping a variety of content needs. The Simple Card and the Hover Card have the option to place an icon at the top of the card. In the Expandable Card, there is an image at the top which is also optional.

The Simple Card has the button call-to-action fully visible at the bottom of the card, and is a good choice for clear, direct communication. 

The Hover Card has the button call-to-action on hover. In this case, the navigation is more intuitive.

The Expandable Card is a good choice for incorporating an image at the top of the card. The image can be a staff profile picture, or another type of content. In this variation, the text call-to-action prominently appears below the headline.