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.
  • 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).
Expand or Collapse all.

Image Cards: Two Columns, Different-Sized Photos

This example shows two images of different sizes next to each other in a column.

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. 

 

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

Old Main

This red-roofed, castle-like landmark was Texas State University’s first building, opening in 1903.

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.

kids on hammocks

Title

cheerleaders at football game

Title

old main and trees

Title

campus shot

Title

Two Columns: Small – Large

cheerleaders

Title

Example of a gold caption background.

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.

cheerleaders at game

Title

Example of a sandstone caption background.


Other Layout Options: Mosaic and Collage

Mosaic Layout – 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. 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.)

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.

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 Layout 

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. 

photo spread of the admissions viewbook

Title

Caption goes here

starting conversations page spread in viewbook

Title

human experience research video

Video title

Play Video
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