Skip to main content

Possible online services disruption due to Internet related outage

A worldwide technology outage is causing disruption to some State of Illinois online systems.  We are aware of this issue and are diligently working on restoration.

Image Card V2

Description

Image Card 2 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.

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.

Dark Text (Default) - Differing Image Positioning

Top 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 Left Image Position

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

Top Right Image Position

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

White Text - 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