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

Description

Image Card 1 is a component designed to frame and call attention to content and drive traffic through graphic means. It offers a CTA button as the default setting.

Authoring

The Image Card component is a flexible-width rectangle with an author-defined background color and image, containing information such as title, description, and a default CTA button with icon options

Configuring the Properties tab

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

Configuring the Desktop tab

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

Configuring the Mobile tab

  • Drop an image of your choice for the mobile breakpoint.
  • Disable Dynamic Media for Mobile: 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.

Configuring the CTA tab

  • Configure a CTA button by putting the link and button label.
  • Aria label optional.
  • Icon is 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 & Light Background Color - Differing Images For Desktop And Mobile - Button with Icon

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

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 Right 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

No title 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