Component: Call To Action 1.1

This builder will allow you to generate a custom version of the Call To Action component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Additional Components

In addition to the main component, the following additional components and/or CSS/JS modules have been added to help you build your version of the component:

Icon: You can use the icon component in the card.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

theme (attribute)

Color theme used

align (attribute)

Align text

width (attribute)

Width of component

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-call-to-action--font

Font family for the content [default: var(--il-font-sans)]

--ilw-call-to-action--padding-top

Top padding inside the component [default: 6.25rem]

--ilw-call-to-action--padding-right

Right padding inside the component [default: 30px]

--ilw-call-to-action--padding-bottom

Bottom padding inside the component [default: 5.75rem]

--ilw-call-to-action--padding-left

Left padding inside the component [default: 30px]

--ilw-call-to-action--content-max-width

Maximum width of the content area, excluding the icon [default: 814px]

--ilw-call-to-action--content-padding

Padding of the content area [default: 8px]

--ilw-call-to-action--content-padding-column

Padding of the content area on smaller devices [default: 8px 20px]

--ilw-call-to-action--icon-margin

Spacing between icon and content [default: 2rem]

--ilw-call-to-action--icon-width

Icon maximum width [default: 8rem]

--ilw-call-to-action--icon-height

Icon maximum height [default: 6.5rem]

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

Call to action component to prompt visitors to perform an action or a few related actions.

Full Version: 1.1.0

Type: web component

Date Created: 10/3/2025

Version notes:

Github repository: https://github.com/web-illinois/ilw-call-to-action/

Javascript file: https://cdn.toolkit.illinois.edu/ilw-call-to-action/1.1.0/ilw-call-to-action.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-call-to-action/1.1.0/ilw-call-to-action.css

JSON information: ilw-call-to-action.1.1.json