Skip to main content
University
Marketing and Communications

Cards

A card is a flexible and extensible content container.

card is an interface element that is great for distinguishing information and actions. Use it to highlight primary user tasks, business goals, or other actionable tasks.

Navigate here to Give Now ImageLibrary scene
Navigate here to Give Now Image
Image

Cards can include an image, positioned above the text content.

Navigate here to Give Now ImageGive Now
Navigate here to How to Give Include a list
Include a list

Add an unordered list in the "Card List" field and special card-specific styling will be applied. Lists can include links.

Navigate here to How to Give Include a listHow to Give
Card Header
Navigate here to This replaces a panel.
This replaces a panel.

Use the Card Header field to position text above the card content, similar to the Panel in Bootstrap 3.

Navigate here to Contact Us
Contact Us

The body of the card can include any HTML, including links. Submit a support request if you have any questions about Cards.

Do: Present three clear actions presented in three columns with short, concise copy. An action grid such as this can break up otherwise dense pages.

Do: Use cards in the right sidebar for fixed information such as quick contact information, hours, and more.

Don't: Use more cards than are necessary. If you have two action items, use two cards.

Don't: Present more than one primary action per card.