Image Cards

Image Cards serve as a way to improve the visual representation of a link. Not every link on a webpage should be an Image Card, and they should be used with discretion. First, think about the page content and the target audience/user. Then decide whether an Image Card will best represent your link and content to help the user navigate the site better.

In order for the Image Card to function and behave properly, the following rules must be applied:

• The class .img-card must be applied to the containing parent <div> element. (See the HTML example below)
• The <p> tag must be wrapped in a Cascade protect tag <!--#protect <p>Image Card Title</p> #protect-->. (See the HTML example below)
• The image used should be a minimum of 768 pixels wide regardless of how small it will appear on full desktop windows.
  • The only exception to this rule is if you are using Image Cards inside of a CSS Grid or flex setup and not Bootstrap columns/rows.
• All source images should be the same width and height for each image card.
• Image Card titles look best on a single line, but exceptions can be made depending on the situation.

The HTML code for an Image Card

    <div class="img-card">
      <a href="">
        <img src="image.jpg" alt="" />
        <!--#protect <p>Image Card Title</p> #protect-->
      </a>
    </div>

Image Card Alt

As an alternative to the default image cards, you can add a second class to your image card element called, ".img-card-alt".

class="img-card img-card-alt"

This is an option to add some color and life to a page, but should be used sparingly. It can be helpful in cases where you have an image that has a very light or white background with no visible borders (see example below). Ideally, you should not use img-card-alt with more than 6 image cards on a page to reduce the amount of repeating red that can bother the eye.