Image Cards
The Image Cards component is a flexible, visually engaging way to pair imagery with text to create discreet, linkable cards. These cards can be used to guide users to related pages or to highlight images with supporting context. The component offers a range of customization options—including color themes, cards-per-row layouts, and image shapes—ensuring maximum design flexibility. Additionally, most elements within each image card are optional, allowing the component to adapt to a wide variety of content needs.
When To Use This Component
The Image Cards component has many uses, with its core purpose being to link to 2 to 4 related pages while providing strong visual presence. Because it is a fully manual component, it offers significant flexibility in how content is displayed. Image Cards can be used to present content in a visually structured, scannable format that encourages exploration, for example, using the circular image option to feature people or highlight images in a more stylized way.
USE CASES OR SCENARIOS
- Linking to related pages, sections, or resources
- Highlighting services, departments, or initiatives
- Showcasing featured content with a strong visual element
- Organizing multiple links in a grid layout without overwhelming the page
- Adding visual interest while maintaining clear, concise messaging
Image Cards work best when each card represents a distinct and equally important piece of content and when imagery helps reinforce the message or purpose of the link.
Component Do’s & Don’ts
DO
Use high-quality, relevant images that support the content and align with university branding, and keep text concise by using short titles and brief descriptions so cards remain easy to scan. Ensure consistency across all cards by maintaining similar image styles, text lengths, and layouts, and use clear, descriptive link destinations so users understand what to expect when clicking a card. Additionally, include alternative text (alt text) for all images to support accessibility and ensure the content is usable by all audiences.
DON’T
Avoid overloading Image Cards with excessive text, as this can reduce clarity, create inconsistency between rows and diminish their visual impact. Do not use unrelated or purely decorative images that fail to add meaning or context to the content, and avoid using Image Cards for long-form content or complex information that is better presented in text-based layouts. Additionally, do not repeat the same link across multiple cards, as doing so can confuse users and reduce the effectiveness of the component.
Component Design Options
Below are the Image Card component design options, with explanations of each and guidance on proper usage.
EDITABLE PARTS:
- Styles:
- Grid: Displays images in their standard square format, making it ideal for showcasing content, locations, or visuals that require full image detail.
- Circle: Crops images into a circular format, which works well for highlighting people, profiles, or other content that benefits from a more stylized presentation.
- Block Heading:
- Show Block Heading: Option to turn off or on the header.
- Eyebrow Text (optional): An eyebrow text is a small line of text that appears above the title. Its purpose is to provide context, category information, or a subtle introduction to the main heading without drawing as much attention as the headline itself.
- Title (optional): A header title should clearly convey the blocks main topic, be visually prominent, and guide visitors through the content while maintaining readability and accessibility.
- Description (optional): The description provides a brief, clear summary that supports the header title and helps visitors quickly understand the block content.
- Button (optional): The button prompts users to take a specific action. Its text should be short, clear, and compelling, and the linked URL must be correct and active to ensure users reach the intended destination.
- Button Color: Green, Gold
- Block Options:
- Background Color: Gray, Black, White (For ADA Compliance, the colors you choose will alter the card color)
- Card Color: Gray, Black, White (For ADA Compliance, the colors you choose will alter the background color)
- Image Card:
- Image: Incorporate relevant, high-quality graphics that reinforce the message, while maintaining visual balance between text and image for a polished, professional appearance.
- Title (optional): The title should clearly communicate the block’s primary topic. Keep titles concise, focused and short.
- Description (optional): The description provides a brief, clear summary that supports the CTA title and helps visitors quickly understand the block content.
- Link (optional): The button prompts users to take a specific action. Its text should be short, clear, and compelling, and the linked URL must be correct and active to ensure users reach the intended destination.
The example below shows the Image Card in use, along with the selected configuration options.
- Styles: Circle
- Block Heading:
- Show Block Heading: Yes
- Eyebrow Text: None
- Title: Giving Campaign
- Description: None
- Button: None
- Block Options:
- Background Color: Black
- Card Color: When the Circle style is selected, the card color option is automatically removed.
Giving Campaign
- Styles: Grid
- Block Heading:
- Show Block Heading: Yes
- Eyebrow Text: None
- Title: Giving Campaign
- Description: None
- Button: None
- Block Options:
- Background Color: White
- Card Color: Gray
Giving Campaign