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

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Containers


Configure: select the dropdowns below to display the variety of options that a call to action block supports.

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.



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


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.


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.