Links: ilw-call-to-action in Builder | Illinois Web Theme | Toolkit Development
The call to action component is used to prompt visitors to perform an action or a few related actions, such as subscribing to a newsletter or beginning an application.
It can contain a link or group of links and may include an icon. It uses a background that contrasts with content around it to draw attention and add visual separation.
By default, the call to action is shown with a gray background and start-aligned text. There are a few attributes to control the component:
slot="icon"
, which will move to be above
the heading in smaller screen sizes.white
, blue
and blue-gradient
. For example, theme="blue"
.align="center"
. With large screen sizes,
the icon slot will remain on the left, and the text center aligns in its
container.<ilw-call-to-action>
<img src="https://cdn.brand.illinois.edu/icons/solid/white/comment.svg" alt="" slot="icon">
<h3>Training Opportunities</h3>
<p>Need more in-depth guidance on building Illinois websites? Check out these resources.</p>
<ul class="ilw-buttons">
<li><a href="#">Brand training resources</a></li>
<li><a href="#">Web components guides</a></li>
</ul>
</ilw-call-to-action>
alt=""
attribute. For inline svg
, use aria-hidden="true"
.ilw-sr-only
if needed to add context.When upgrading from the v2 toolkit component, the following changes are needed:
il-call-to-action
to ilw-call-to-action
.class="il-theme-gray"
-> theme="gray"
class="il-theme-blue"
-> theme="blue"
class="il-theme-white"
-> theme="white"
class="il-theme-blue-gradient"
-> theme="blue-gradient"
class="il-align-left"
-> align="left"
class="il-align-center"
-> align="center"