Cards

Cards briefly describe and link to a piece of content.

These are very useful for landing pages that guide users to content further down. You can use image-based or text-based cards depending on your needs. 

Tips on images:

  • Use horizontal images. Vertical ones will have parts cut off. 
  • Do not use text within the image; use the heading and text in the card instead. 
  • Use photography instead of graphics when possible. 

 

Types of Cards

Card With Image

Titles Briefly Describe Linked Content

Descriptions for image cards are best kept short 

Follow Image Sizing and Aspect Ratio Guidelines

All images should be horizontal. Vertical (portrait) images will likely have cut off images.

Always Include a Link

When adding a card in the backend, don't forget to add a page link, otherwise the card will look broken.

Text-Only Cards

Cards Don't Always Need Images

Sometimes a 3-column layout with links gets the job done.

One Main Link

Text-Only Cards Can Be More Descriptive

These cards take up less room, and are ideal for when you need some added room for extra content.

One Main Link

Consistency is Key

Just like with cards with images, try to be consistent: if one card has a description it's best if all your cards in the group have one.

Another Main Link