Image Overlay Card Block
The Image Overlay Card block displays a styled card that combines an image, title, and link into a single visual element. Image Overlay Cards are most commonly used inside a Columns block to display a series of two or three cards in a row.
Table of Contents
Why use the Image Overlay Card block
Use the Image Overlay Card block when you want to highlight important links or content areas using a visually prominent card layout with a full-image background. Unlike the Image Card block, the image fills the entire background of the card, with the card content displayed over top of the image. An overlay color is applied above the image to improve readability and visual contrast.
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 visually engaging 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 Overlay Card block is part of a set of card layout blocks, including the Icon Card and Image 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 Overlay Card block to the page. Learn how to add blocks.
Once the block is added, editors typically:
- Upload or select an image
- Choose an overlay color to improve text readability and visual appearance
- Add a title
- 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.
Block toolbar
The block toolbar appears above the Image Overlay 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 Overlay Card block is selected.
Image
The Image field allows you to upload a new image or select one from the Media Library.
The recommended image size is 624 × 845 px.
Images with different dimensions or aspect ratios will automatically be cropped to fit the card image area. Using images close to the recommended size helps ensure consistent appearance when multiple cards are displayed together.
Default overlay color
Sets the overlay color that appears above the image background. This overlay helps ensure that the card text remains readable against the image. The color picker allows you to choose both a color and transparency level.
Hover overlay color
Controls the overlay color when the card is hovered. Changing the hover overlay color can provide a subtle visual interaction when users move their cursor over the card.
Use dark theme
This toggle changes the card text color from dark to light. Use this option when darker overlay colors are applied so that the text remains readable. Editors should ensure that the combination of image, overlay color, and text color maintains sufficient contrast for accessibility.
Title
The main heading displayed in the card. This should be short and descriptive so users can quickly understand the purpose of the card.
Link text
The visible call-to-action text displayed within the card. This text works together with the card title 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 Overlay 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 Overlay Card block includes several structural considerations.
Heading structure
The Image Overlay Card Title is always output as an H3 heading. Because of this, Image Overlay Cards should appear within sections introduced by an H2 heading.
This helps maintain proper heading hierarchy and supports screen reader navigation.
Color contrast
Editors control the overlay color and theme settings for this block.
Because of this, it is important to ensure that the text remains readable against the background image and overlay color. Choosing appropriate overlay colors and enabling the Use Dark Theme option when necessary helps maintain sufficient color contrast.
Tips for editors
Use Image Overlay Cards in groups
Image Overlay Cards are most effective when used inside a Columns block to display two or three cards side-by-side. This creates a strong visual layout.
Use consistent overlay colors
When multiple Image Overlay Cards appear together, use the same overlay and hover colors for each card. Consistent color choices create a more cohesive and balanced layout.
Choose images that support readability
Images with simple composition and moderate contrast tend to work best. Busy images may make text harder to read.
Keep titles concise
Image Overlay Cards work best when content is brief and scannable. Avoid long paragraphs inside the card.