Cards - Text + Image

Cards with text and image


Up to three horizontal cards with a top image, a central text area, and a bottom button.

On-page Example

To preview a live example of the component or inspect the code, click the link below

Cards - Text + Image 

Component Specifications

Item/Field Description Required/Optional
Title Field type: Single line text
Text: H2
Character Recommendation: 25
Wrapping: Single line

Link: Button is clickable
Hover on Button: Outline closes, background turns
to grey
Number: 2-3 cards 

Card – Image Field Type: Media upload/select field
Aspect Ratio: 1.13:1
Optimal Image Dimensions: 369x326 
Card – Description Field type: Single line text
Text: Paragraph
Character Recommendation: 90
Wrapping: Wrap to two lines 
Card – Link Text  Field type: Single line text
Text: Styled text
Character Recommendation: 25
Wrapping: Single line
Card – Link
Field type: Link field  Required
Mobile Response Stack elements vertically NA
Page Placement Full Width  NA
Accessibility Cards are included in tab through and active state
will duplicate the hover state. Tab through will
advance through the cards from left to right. 

When to Use

Use when you need an image above text with a button underneath.

When to Consider Something Else

If you need the image, text, and link button in a different visual style, or if the text you need is too long.

How to Use

Insert an image, fill in the text for the image and the button, and then choose a link target.

Accessibility Tips

Make sure the text is accessible against the background color.