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, Hover, and Expandable.  The three variations offer similar functionality, but differ mostly in how the content is displayed.

Lastly, the Card component can be configured to work on a plain or dark background through the Style system options to ensure the text is easy to read.  The style options can be accessed by clicking on the Style system icon (paintbrush) on the component.

Simple Card

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

Hover Card

The Hover Card is similar to the Simple Card 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. 

Tower Card

The Tower Card is provides clear and concise information about a single item, links to a page for further info. The divider line is customizable, fits within the color theme by default.

Announcement Card

The Announcement Card is similar to a callout in a textbook, a shaded box area of content that provides info or helpful tips and a link. The background is a very light theme color by default.

Contact Cards

There are multiple versions of contact cards, allowing for a variable length content such as a specific individal (leadership card) and a specific location (properties & contact card). Many details can be added to this card with ease.

Featured Card

The Featured Card should be used sparingly for recent and timely infomation or document links.

Reservation Card

The Reservation Card (or Event Card) is useful for creating a box of specific info around a time slot and location, while providing other pertinent information.

Image Fade Card

The Image Fade Card is useful for creating a colorful clickable box that changes color when you hover over it.

Given the 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.