Skip to Content

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

Expand or Collapse all.

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.
cheerleaders at football game

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 building with trees

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.
students walking in quad

Title

Caption goes here.

pond

Title

Caption goes here.

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

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

Title

Caption goes here.

graduate jumping in river

Title

Caption goes here.

researching

Title

Caption goes here.

alkek sunbeam

Title

Caption goes here.

Title

Caption goes here.

students and teacher around a table

Title

Caption goes here.

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

  • These image cards are cropped to 1:1 square.
old main through the trees

Title

Caption goes here.

person playing violin

Title

Caption goes here.

girl looking through microscope

Title

Caption goes here.

the arch walkway

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. 

 

photo spread of the admissions viewbook

Title

Caption goes here

starting conversations page spread in viewbook

Title

Video title

cover of book

Title

Caption goes here

texas state library at night

Title

gym floor in jowers with texas state star

Title

Caption goes here

a student and professor

Title

Caption goes here