Call To Action on Version 2.16
Preview this component (Custom Element; v2.4.0; 12/8/2021)
Guidelines using the component
Get started today!
Enroll in a class after you are admitted as a non-degree student.
Get started today!
Enroll in a class after you are admitted as a non-degree student.
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.)
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 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.
It is highly recommended from the design team that you do not include icons along with centered text (il-center).
Component Display
Change Your Content and Options
Template -- enter raw HTML here
Important Classes
N/A
Classes
Attributes
N/A
Advanced Options
These options are only to be used in advanced situations -- most of your needs should be met through the attributes and classes, and this breaks the intent of having a unified design.
Custom Style Tag before text
How to add it to your page
Copy and paste this in your page. Remember
- Make sure you have updated your component to make sure the below code is completed.
- Make sure you have the Header code in your header.
Note that this uses the custom style 'builder-custom'. You may need to change this if you are using multiple versions of this component with different styles.