Cards

Image Cards

Best Practices 

• Use image cards to add photos and colorful captions to your page.
• This content type can be a good way to send a user to another related page by making the image card into a clickable link.
• Use one consistent caption background color within each section of a page.
• Crop your images to the same size if you are putting them in a column next to each other and want them to look symmetrical. You can choose what aspect ratio you would like to crop your images to. More information can be found about this below.
• If you are using two or more image cards in columns next to each other, try to keep all captions the same length. Longer captions mean longer image cards, even if the images themselves have been cropped to the same size.

Avoid 

• Don't use photos or graphics with text on them. Instead, put that content in the caption. 
• Avoid using multiple caption background colors next to each other (example: maroon, gold and charcoal all in a row).

Section Types, Layouts & Cropping for Cards

Examples

Image Cards: Two Columns, Different-Sized Photos

• This example shows two images of different sizes next to each other in a column.
• If you want to crop the images to the same size, click the tab for cropping when you are in the "edit" view and you can crop the photo to the aspect ratio of your choice.

Image Cards: Two Columns, Same-Sized Photos

• This example shows two images that have been cropped to the same size next to each other in a column. You may also auto-crop these images in the "edit" view by clicking the tab at the top for cropping and choosing your desired aspect ratio. 
• The length of your caption may also affect the height of your card.

Image Cards: Three Columns

• This example shows three image cards with images all cropped to the same size. The captions differ in length, so the cards are longer or shorter in order to fit the different captions (change your browser width or view the page on a small device to see how the responsive cards work). 
• This is also a good example of how to drive users to different content areas on your website. Each of these image cards is a link that takes users to a page describing the topic on the card.

Image Cards: Four Columns

• This is an example of a four-column layout using just a title with no caption. Titles and captions are optional, not required.

Two Columns: Small – Large

Two Columns: Large – Small

Other Section Type Options: Mosaic and Collage

Mosaic Section Type

In this section type, you can incorporate image cards, video cards and RSS feed cards into a grid-like section. See examples below on this page.

You may also use the mosaic layout to add filters to your cards. This allows you to have filtered content for specific use cases. Review the different options for mosaic, then learn more about filtering.

Mosaic Section Type – Large (Up to two columns on desktop)

• These image cards are cropped to 4:3 landscape.

Mosaic Layout – Medium (Up to three columns on desktop)

• These image cards are cropped to 3:2 landscape. 

Mosaic Layout – Small (Up to four columns on desktop)

• These image cards are cropped to 1:1 square.

Collage Section Type 

In this section type, you can choose from an image card or a video card. Then you can choose a small card or a large card.

Photos will be cropped automatically to fit into the image card size that you choose for them, either large or small. You can alternate between large and small cards, or make them all the same size. This layout is meant to look like a Pinterest-style grid. 

For the video cards in this section type, you will not be able to choose the cropping option for the splash image, and must crop it to your liking before uploading it.