Card: Image

A card that leads with a featured image, paired with a title, short description, and link.
Example of the "Collection: Card Grid" component, populated with "Card: Image" cards

The Card: Image is the most visual card type. It leads with a featured photo, followed by a short title, a brief description, and a link, all in the consistent card shape. Like every card, it lives inside a Collection: Card Grid and sits alongside up to two other image cards in a row.

When to use a Card: Image

Reach for a Card: Image when a photo helps tell the story and you have a few parallel items to show side by side. Good use cases include:

  • Featured academic programs, each with a representative photo
  • Campus locations or facilities, such as the library or a residence hall, with a photo and quick description
  • Student or faculty stories, each with a portrait and a link to read more
  • Visual quick links to a gallery, virtual tour, or event page

If you only need text, the Card: Text or Card: Info is a better fit. If you want a simple graphic instead of a photo, use the Card: Icon. For a single standalone image that is not part of a set, use the Media: Image component instead.

Adding and modifying a Card: Image

Inside a Collection: Card Grid, click "Add Collection: Image" to add a card, then fill in the fields below. You can add up to three image cards, and reorder them with the drag handle on the left of each card.

Collection Heading (optional)

The Collection Heading is the title displayed above the row of cards. Keep it short and descriptive, up to 60 characters.

Subheading (optional)

The Subheading is a short supporting line displayed beneath the Collection Heading, up to 130 characters. It only appears when you have entered a Collection Heading.

Image (required)

The Image is the featured photo at the top of the card. Upload an image and add Alternative text, a short description that screen readers announce and that displays if the image does not load. For help choosing, sizing, and cropping images, and for writing good alternative text, see the Working with Images guide. The image works the same way as the standalone Media: Image component.

Card Title (required)

The Card Title is the bold heading shown beneath the image, up to 40 characters. Keep it short and scannable, such as the program name or location.

Description (required)

The Description is a short line of supporting text below the title, up to 130 characters. Use it to add context the title alone does not convey.

Link (required)

The Link is where the card points when readers click it.

  • URL: Start typing the title of an existing page to search for and select it, or paste an internal path or a full external web address such as https://www.ithaca.edu.
  • Link text: The visible text for the link, such as "Learn more" or "Explore the program."

Choosing The Link Style

How the link is displayed, whether the whole card is clickable, a text link, or a button, is chosen once for the entire collection by the Link Style field, so every card in the group links the same way.

  • Card Link makes the entire card a clickable link.
  • Text Link adds a link at the bottom of each card.
  • Button Link adds a button at the bottom of each card.

To have link-less cards, pick the Text Link style and utilize the <nolink> tag, as described in Working with Links.

Looking for an example?

This component isn't available on standard pages. See it in context on the Web Content Demo.

View Demo