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.

Icon Card

Description

Icon Card is a component designed to frame and call attention to content and drive traffic through graphic means

Authoring

The Icon Card component is a flexible-width rectangle with an author-defined background color and icon, containing information such as title, description, and an optional CTA button.

Configuring the Properties tab

  • Enter the card title.
  • Enter a description for the card.
  • Configure the background color.
  • Select an icon from the fontawesome library. Optional.

Configuring the CTA tab

  • Make the full card clickable or configure a CTA button by putting the link and button label.
  • 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

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

No Icon

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

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

White Text

No Icon

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

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