Image Card v2

Image Card v2 is a component designed to frame and call attention to content and drive traffic through graphic means. It offers two different types of CTA settings (button vs. card).

The Image Card V2 component is a flexible-width rectangle with an author-defined background color and image, containing information such as title, description, and two different types of CTA settings (button vs. card). By selecting one of the CTA options, either a full card is clickable without a button or just a button is clickable.

• Enter the card title.
• Enter a description for the card.
• Configure the background color.

• Drop an image of your choice for the desktop breakpoint.
• Disable Dynamic Media for Desktop: For PNG images that require transparency, you will need to select this option.
• Configure the image placement to change the focal point of the image.
  • Learn how to manipulate the appearance of the image on the card.

• Drop an image of your choice for the mobile breakpoint.
• Disable Dynamic Media: For PNG images that require transparency, you will need to select this option.
• Configure the image placement to change the focal point of the image.
  • Learn how to manipulate the appearance of the image on the card.

• Configure a CTA button by putting the link and button label.
• Link: Enter a URL or a file path to an image or asset.
• Aria label optional.

• Adjust the card text color as needed. Select white text style if you have configured a dark background color and vice versa.

Many times Authors aren't meant to be graphics designers, and many times just want to throw an image in to an Image Card and it just fits perfect no matter what without the additional need for Image Modifiers.

Take note, as Image Cards render images at different widths based on the width of the component:

• 3-column wide image cards use image rendered area of 260 pixels x 200 pixels on LHN pages and 270 pixels x 200 pixels on Full Width pages.
• 4-column wide image cards use image rendered area of 370 pixels x 200 pixels.
• 6-column wide image cards use image rendered area of 570 pixels x 200 pixels.
• Mobile Image Cards use rendered area of 384 pixels x 200 pixels.