- 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.
- 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.
- 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).
Image Cards: Two Columns, Different-Sized Photos
This example shows two images of different sizes next to each other in a column.
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.
Image Cards: Three Columns
This example shows three image cards with images all cropped to the same size. The captions differ in length, so one card is longer in order to fit its longer caption.
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
You can only put the image card in the small part of the column. Here, the small column is on the left and the large column is on the right.
Two Columns: Large – Small
You can only put the image card in the small part of the column. Here, the large column is on the left and the small column is on the right.
Other Layout Options: Mosaic and Collage
Mosaic Layout – 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. Note that one of the cards in this example is a video rather than a still photo. (Video cards have only one field, "title," for entering any text that you want to include.)
Mosaic Layout – Small (Up to four columns on desktop)
These image cards are cropped to 1:1 square.
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.