Component

Call to Action

Description 

The Illinois components call to action gives a colored background with areas for text, buttons, and an optional icon. You can choose alternate Illinois brand colors and change icons. (If you want to use an image instead of an icon, look at Image Feature instead.) 

What it looks like 

Example image (version 2.6, Feb. 16, 2022): 

Try it out 

• Call to Action Component Builder: To see how it works with your own content and images
• Call to Action Preview: To see all the possible color and alignment variations
• Dev Codepen for Call to Action: To experiment with all the code

Recommended patterns 

(In the examples below, replace bolded elements with your own content.)

Code that will create a call to action like the screen shot above, with left alignment, a blue gradient background, an icon, and three buttons:

<il-call-to-action class="il-align-left il-theme-blue-gradient">
<span slot="icon" class="il-icon-line">faq</span>
<h3>Get started today!</h3>
<p>Enroll in a class after you are admitted as a non-degree student.</p>
<p><a href="#" class="il-button">Registration overview</a><a href="#" class="il-button">Contact Us</a><a href="#" class="il-button">Accessing email/Compass</a></p>
</il-call-to-action> 

Customizations and notes 

Changing icons and icon styles

 There are two visual weights of icons available:

• il-icon presents a solid icon against whichever background color you have chosen.
• il-icon-line (demonstrated above) presents an icon outline.

Changing icons:

• The keyword inside the <span></span> tag indicates which icon will be displayed.
• The list of icons and their keywords are shown in the Component Builder’s Icon Preview page.

Changing colors and alignments 

The Call to Action Component Builder offers several color patterns and two text alignments. You can choose from several options based on campus color selections which have been vetted for accessibility.

See the syntax guide below for a detailed breakdown of the color options and positioning options available. 

Syntax guide 

(In the examples below, replace elements in bold with your own content.)

The default syntax: 

<il-call-to-action>
Content goes here
</il-call-to-action> 

Where to add elements: 

<il-call-to-action class="il-icon il-align-left"> <!-- or other appearance and alignment classes -->
<span slot="icon">Icon name goes here</span> 
Content goes here
</il-call-to-action> 

Additional attributes for this component: 

icon 

• Syntax

<span slot="icon" class="il-icon">Icon name goes here</span>

• Value: The name of the icon you would like to use. See the Component Builder’s Icon Preview page for the full list of options.
• Default value: Nothing  
• Required: No. If no icon is specified, the rest of the content will be displayed. 
• Details: Two icon-specific CSS classes are available:
  •  il-icon (the default): The icon will be solid.
  • il-icon-line: The icon will be an outline with the background showing through.

CSS options 

il-align-left (or center)

• Syntax:

<il-call-to-action class="il-align-left">
Content goes here
</il-call-to-action>  

• Alignment values available: 
  • il-align-left 
  • il-align-center 

• Default value: If nothing else is specified, the content will be left-aligned. 
• Required: No 
• Details: This class goes within the il-call-to-action tag. 

il-theme-gray (or other colors)

• Syntax:

<il-call-to-action class="color value">(content)</il-call-to-action>  

• Color values available: 
  • il-theme-gray 
  • il-theme-white
  • il-theme-blue
  • il-theme-blue-gradient 

• Default value: If nothing else is specified, the block will be il-theme-blue-gradient. 
• Required: No 
• Details: This class goes within the il-call-to-action tag. 

About this component 

• Type: Custom Element 
• Introduced in: v2.3.0; 9/29/2021 
• Deprecated?: No