Call to action block
Regular links can blend into other content or be hard to distinguish from other links, especially if a page contains many such links. Users who can't quickly find a link to complete a task may become frustrated and abandon the task altogether.
Call to action block visually highlights and separates the information from the rest of the page content and identifies it as important for the user. It allows for a brief phrase or introduction to encourage users to take the action and click on the button(s) provided.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Containers
Demo
Configure: select the dropdowns below to display the variety of options that a call to action block supports.
Code
Responsive preview
Usage best practices
In general, place the call to action block at/near the top of the page to indicate importance or next to the related information so that the users can make the connection between the information and the action.
Match the button hierarchy with information hierarchy. Use primary button or combination of primary/secondary buttons for the most important CTAs. Choose the utility or two utility buttons options for less important CTAs.
Consider using call to action block:
- to visually feature calls to action on a page
Usage examples:
- bookings
- newsletter subscriptions
Do
Keep button labels succinct and clear.
Make the body content descriptive so users are clear on the action and where the button will take them.
Don't
Do not use two primary buttons in one block. Actions must not compete with one another.
Do not use multiple CTA blocks near each other. This can confuse users as to what action to take.
Do not include in-line links to avoid confusing the users as to what action to take.