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
-
Section Types for Image Cards
- Two columns
- Three columns
- Four columns
- Two columns: small – large (image cards only available in the small part of the column)
- Two columns: large – small (image cards only available in the small part of the column)
-
Layout Types
- Mosaic (video and RSS cards also available)
- Collage (video also available)
-
Cropping for Mosaic Layouts
- Use default layout (no cropping)
- Crop image cards to 16:9 landscape
- Crop image cards to 4:3 landscape
- Crop image cards to 3:4 portrait
- Crop image cards to 3:2 landscape
- Crop image cards to 1:1 square
Note: Any time that your photos are not already in your chosen aspect ratio, they will be cropped automatically to fit. This means that the edges of your photos may get cut off in order to fit the image card's size. To avoid this, crop your photos into the chosen aspect ratio before you upload them.
Cropping for Certain Aspect Ratios
Let's say that you have an image with a 3:2 aspect ratio. The actual size of this image in pixels might be 300 by 200, 600 by 400, 1350 by 900 or so on. As long as the relationship between the width and the height is always 3 to 2, the aspect ratio does not change, even though the size of the image does. So none of this image will get cut off if you place it into a 3:2 layout.
Now, let's consider an image with a 4:3 aspect ratio. The horizontal and vertical size of this image in pixels might be 400 by 300, 800 by 600 or 1800 by 1350. If you place this image into a 3:2 layout (or anything other than 4:3), the edges of the photo will get cut off to make it fit into the different aspect ratio layout.
Here are some example sizes that you can crop your images to, depending on what aspect ratio you're using:
Mosaic layout choices
16:9 landscape
- 1280 px width by 720 px height
4:3 landscape
- 1800 px width by 1350 px height
- 1200 px width by 900 px height
3:4 portrait
- 1350 px width by 1800 px height
- 900 px width by 1200 px height
3:2 landscape
- 1350 px width by 900 px height
- 600 px width by 400 px height
1:1 square
- 1280 px width by 1280 px height
- 800 px width by 800 px height
Image Cards in regular sections
For a landscape-style photo:
- 1350 px width by 900 px height
For a portrait-style photo:
- 900 px width by 1350 px height
*Note: px stands for pixels
-
Sizes Available for Collage Layouts
- Large card
- Small card
- Note: you can alternate sizes in the grid, or make cards all the same size.
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.

Eat 'Em Up, Cats!
Our Bobcats are part of the Sun Belt Conference and the Football Bowl Subdivision, the highest level of NCAA Division I competition.

Old Main
This red-roofed, castle-like landmark was Texas State University’s first building, opening in 1903.
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
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 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.

Title
Caption goes here.

Title
Caption goes here.
Mosaic Layout – Medium (Up to three columns on desktop)
- These image cards are cropped to 3:2 landscape.

Title
Caption goes here.

Title
Caption goes here.

Title
Caption goes here.

Title
Caption goes here.
Title
Caption goes here.

Title
Caption goes here.
Mosaic Layout – Small (Up to four columns on desktop)
- These image cards are cropped to 1:1 square.

Title
Caption goes here.

Title
Caption goes here.

Title
Caption goes here.

Title
Caption goes here.
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.

Title
Caption goes here

Title
Video title

Title
Caption goes here

Title

Title
Caption goes here

Title
Caption goes here