Image Card Block

The Image Card block displays a styled card that combines an image, title, description, and link into a single visual element. Image Cards are most commonly used inside a Columns block to display a series of two or three cards in a row.

Why use the Image Card block

Use the Image Card block when you want to highlight important links or content areas using a visual card layout with imagery.

Common uses include:

Linking to key pages or resources
Highlighting services, programs, or categories
Creating navigation shortcuts within a page
Displaying a set of related actions in a clean layout

Because the entire card becomes clickable when a link is applied, this block creates a large interaction area that improves usability for both desktop and mobile users.

Note: The Image Card block is part of a set of card layout blocks, including the Icon Card and Image Overlay Card. These blocks function similarly but use different visual styles depending on whether you want to display an icon or image.

How to use the block

Start by adding the Image Card block to the page. Learn how to add blocks.

Once the block is added, editors typically:

Upload or select an image
Add a title and short description
Enter link text for the call-to-action
Apply a link to the card using the block toolbar

While the card content is configured in the block settings sidebar, the link itself is applied in the block toolbar.

The block toolbar appears above the Image Card block when it is selected.

Available options

Alignment: Controls how the card aligns within its container. The alignment can be adjusted when the block is used independently, however, keep it set to None when used inside columns or other layout blocks.
Link: Adds a destination link to the card. When a link is applied, the entire card becomes clickable.

Block settings

Block settings appear in the right sidebar while the Image Card block is selected.

Image

Recommended image size: 600 × 400 px.

The Image field allows you to upload a new image or select one from the Media Library. Images with different dimensions or aspect ratios will automatically be cropped to fit the card image area.

Title

The main heading displayed in the card. This should be short and descriptive so users can quickly understand the purpose of the card.

Description

A short paragraph that provides additional context or explanation for the card. Descriptions should be concise and help users understand what they will find after clicking the card.

Link text

The visible call-to-action text displayed within the card. This text works together with the card title and description to encourage interaction.

Link A11y text

Adds additional descriptive text for screen readers. This text is not visible on the page, but it provides additional context about the link destination for users of assistive technologies.

Block styles

The Styles tab in the block settings sidebar includes visual layout controls.

Margin

Controls the spacing around the Image Card block. In most cases, the default spacing should be used. Only adjust margin when additional spacing is needed to improve layout or separation from nearby content.

Accessibility and content structure

The Image Card block includes several structural considerations.

Heading structure

The Image Card Title is always output as an H3 heading. Because of this, Image Cards should appear within sections introduced by an H2 heading.

This helps maintain proper heading hierarchy and supports screen reader navigation.

Tips for editors

Use Image Cards in groups

Image Cards are most effective when used inside a Columns block to display two or three cards side-by-side. This creates a clean and scannable layout.

Choose meaningful images

Select images that reinforce the meaning of the card rather than purely decorative visuals. Relevant images help users quickly understand the purpose of the card.

Keep descriptions concise

Image Cards work best when content is brief and scannable. Avoid long paragraphs inside the card.