When to Use Images, Image Cards, and Teasers

The Teaser component uses a structure very similar to the diagram above and has some special features designed for content promotion:

• Image will not crop allowing you to control the exact aspect ratio on an image. 
• The teaser has both horizontal and vertical display options, making it one of the more flexible components for promoting content. 

Generally, we do not recommend using images with text. That said, we also realize that there are sometimes requirements to display company or partner logos on your website.  Teasers are the best option for this use, since the full image displays without any cropping. 

Just remember to add alt-text to your image for accessibility. 

Image Cards are similar to the Teaser component but have some unique traits with which authors should be familiar:

• The links in Image Cards use a button instead of a CTA which makes the link more prominent. 
  
• Image cards are designed to align with each other, particularly when they are included in the Image Card Container. For that reason, Image Cards with the same width, will crop to retain the same aspect ratio regardless of the original image.
  Because of this cropping, it's important to consider setting the focus on your image card so your image crops appropriately. 

The way images are sized in the Image Card component can be altered using the Dynamic Media Presets. Let's look at how these presets work using the images below.

Using the "ImageCardStandardHeight" Dynamic Media Preset

Using this preset, images get sized to fit the height of the image card. Once resized, if the image is wider than the width of the image card, then the sides will get cropped. (see left image below). If the image is narrower than the image card, then the image will have negative space on either side. (right image below)

Using the "ImageCardComponent" Dynamic Media Preset

With this preset images will get placed into the image card using their full image size and centered horizontally and vertically.  In the examples below, you can see how the large original image get placed and cropped. 

Using the "ImageCardComponent" Dynamic Media Preset with a width setting

The other consideration is that image cropping differs depending on how large the component is on display. 

Because Mobile layouts are often different than desktop, you will need to specify a different image for the image card when displayed on a mobile device.  It is possible that you can use the same image as desktop, but you may find a unique mobile image generates a better result.

The mobile breakpoint is set to 768, and since image cards are set to 200 pixel height, prepping an image at 768 x 200 will insure the least amount of negative space in your image cards.  

The Image Card V2 is very similar to the standard Image card, but it was introduced to offer some unique features:

• Image Cards V2 have an option to make the whole image card clickable.  
  
• You can also use a button in an Image Card V2, but be aware that adding an icon to the button is not an option.
• Image cropping on Image Card v2 has the same behaviors as the standard Image Card.

Note how the image cards above have images of the same height, but the overall cards (with the light blue background) are different heights because of the amount of content included.

To make the image cards appear the same height, you can insert them into a "Card Container."  

(Card Container alignment only works on desktop, since the recommended layout of image cards on mobile is full width.)

Generally, we do not advise using images with text. Aside from the accessibility issues that can arise when using text in images, the cropping issues we outlined above make it particularly difficult to adjust images to avoid cropping.

But sometimes using text in an image is unavoidable; for example, showing an array of partnership company logos. In such instances, it is important to avoid the Image Card and use alternative components.

One solution for this would be to use the teaser component. Images in teaser components do not crop, so you can safely use the logo image in this scenario.

But images in teasers also do not link. An alternative may be to use the image component instead. Images have the option to link to any page, asset, or URL.

In the example below, we are combining an image component with a teaser component where the image field in the teaser is left empty, to achieve a result that looks like a teaser, but where the image can link. We also have placed these elements within a container with a gray background, to also give the visual impact of an image card.

Using Images and other elements as building blocks allows for flexible layout options that may offer your website unique ways of displaying information.

Here's an example of a banner created using an Image, Title, Text, and button laid out within a variety of containers. The image and button are both set to link.