Some things may look a little different on your site
We are currently transitioning from an old set of blocks to these new ones. Please note that the following documentation is for the new blocks. While some things may look similar, there will be likely be some notable differences, so please use caution when referring to these documents and feel free to reach out if you have any questions.
Introduction
The card block gives you an easy way to structure an image with content on your site. You can choose between several styles and positions for the cards and have the option to turn the entire card area into a clickable link.
It is recommended you use this block inside of a layout block, such as the WordPress grid block or column block.
Styles
Default
Display an image above the content.
Image on Left/Right
Display the image in the left or right quarter of the card.
Content Inside
Content will overlay the image. Any text you put inside of this block will be white to provide sufficient contrast between the image and the text. A black gradient will also overlay the image to improve contrast and make the text readable.
Options
Image
Adds an image to the block. If you skip the image, the card will work, but it probably will not appear as you intended.
Image Alt Text
The image alt (alternate) text should describe your image to screen readers for individuals with visual impairments. This is a required attribute for the accessibility of your site unless the image is purely decorative.
Overlay Text
Toggle whether you want to show more content inside of the image when the user hovers over the card. The image will dim, and any text content inside will appear inside of it. It is recommended you only use this with the “content inside“ style.
Example of Card With Overlay Text
Hover over the card to see the overlay text.
Making the Entire Card Link
If you want the entire card to act as one large clickable area, follow these instructions:
- Add a Clear Link Within the Card
Include one link inside the card content. This could be applied to a heading, text, or a button. Ensure the linked text clearly indicates the destination for all users, especially those using screen readers. - Select the Card Block
Click on the outer boundary of the card block to select it. In the right-hand “Block” settings panel, ensure “Block” is active at the top and find the “Link Container” section. Open this panel. - Enable the “Link Entire Container” Toggle
You’ll find a toggle option to make the entire card a link. This option is disabled if the card contains more than one link or no links at all. To function correctly and avoid covering other interactive elements, only one link should be present within the card. - Save and Verify
Save your page and preview it to confirm that the entire card is now a single, working link.
Note: This feature isn’t properly supported in all browsers. If it is not supported, it will fall back to using the actual linked item as the clickable target instead of the entire card.
