A 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.
Image with Clickable Card Title
Adding card title text and a link URL enables the card title text to be clickable.
If a link URL is added to both the image and the card title, only the card title will be clickable.
Include a list
Add an unordered list in the "Card List" field and special card-specific styling will be applied. Lists can include links.
- Ways to give
- Planned giving
- and more.
This replaces a panel.
Use the Card Header field to position text above the card content, similar to the Panel in Bootstrap 3.
Contact Us
The body of the card can include any HTML, including links. Submit a support request if you have any questions about Cards.
Clickable Image
Cards on a Grid
Apply cards to a Grid content type, select the grid number along with the number of columns from two to four columns. To have a card span across the page, check 'Add to a Grid layout' but leave the Grid Container dropdown empty.
Card Title (heading level defaults to h2)
Card Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim, nunc sit amet accumsan gravida, mi nisi posuere.
Best Practices
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.