Skip to main content

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).

Authoring

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.

Configuring the Properties tab

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

Configuring the Desktop tab

Configuring the Mobile tab

Configuring the CTA tab

  • 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.

Configuring the Styles

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

Image Sizes

Take note, as Image Cards render images at different widths based on the width of the component, but the image area will always be a set width and height in size (IE: image will not auto-fit to area). Image cards are always 200px in rendered image height:

  • 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.

Examples

Dark Text & Light Background Color - Differing Images For Desktop And Mobile

Image Card Title

Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

White Text - Different Image Positioning

Center Right Image Position

Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Center Left Image Position

Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bottom Right Image Position

Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dark Text (Default) - More Variations

No title Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

No Image

Description text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

No Description
Title & Button