Callout and Call to Action modules overview

Comparison of Callout and Call to Action

The Callout and Call to Action modules are very similar. They both offer:

  • A heading and a content editor for text.
  • A linked button or text, with the ability to configure button style. In the Call to Action module, the button is required; in the Callout module it is arbitrary, and there is an option for linked text instead of a button.
  • An optional icon on the button with the ability to position it relative to the text.

They differ in the following ways:

  • The Callout module allows an optional image or icon, with the ability to position it above, below, left or right of the text, using the same link as for the button.
  • There are some minor styling differences. For example, the Call to Action module allows you to adjust the spacing above and below it with a slider.

Here are some examples of Callout and Call to Action modules with buttons. Here’s a Callout module with an image and an icon on the button. In this example, the border is set on the row, not in the Callout module.

Here’s the same Callout module with an icon instead of an image. The icon can be placed in a number of positions relative to the heading and text.

And here’s the same content in a Call to Action module placed in a column, with the border set on the column. The icon can only appear on the button, and there is no provision for adding an image, though you can add one as a column or row background, as shown in the version on the right.

Aside from the ability to set vertical space above and below the Call to Action, the Callout module is more powerful and more flexible.

Other uses of the Callout module

Because the button is optional on the Callout module, it plays another important role in combining images with text, because of the ability to position the image in various locations with respect to the text. Here’s an example in which the images are positioned over the text.

A big advantage of using the Callout module for image-text groupings is that they stay together and stack correctly at smaller device sizes.

Related Articles