Skip to Content
Web Guidelines
Texas State Web Guidelines Gato Templates & Content Types Sections & Content Types Cards

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.

    • 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)

    • Mosaic (video and RSS cards also available)
    • Collage (video also available)

    • 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

    • 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.
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.

be a bobcat series video - picture yourself at texas state Play Video

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

human experience research video Play Video

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