Callout

Combine a heading, descriptive text, an optional image or icon, and a call-to-action link or button into a single attention-grabbing block.

Usage

The Callout module bundles a heading, descriptive text, an optional photo or icon, and a call-to-action link or button into one cohesive unit. It is purpose-built for drawing attention to key messages and driving visitors toward a specific next step without requiring you to assemble and align separate heading, text, image, and button modules.

A common use case is displaying a row of feature callouts — each with an icon, a short heading, supporting text, and a link to a relevant page. Because all of those elements live inside a single module, they stay grouped and stack correctly at smaller screen sizes without any extra configuration.

The link you set on the Link tab applies simultaneously to the heading, the photo or icon, and any button or link text. This makes it straightforward to create linked cards without wiring up multiple separate links.

Module Settings

The Callout module is organized into four tabs — General, Style, Image, and Link — plus the standard Advanced tab.

General Tab

The General tab contains the core content for the callout: the heading and the body text.

Heading Supports: Field Connections

The main heading text displayed at the top of the callout. Supports inline editing directly on the canvas.

Heading Tag Default: h3

Sets the HTML element used for the heading. Options: h1, h2, h3, h4, h5, h6.

Choose a tag that reflects the heading's position in the page content hierarchy. Use the Heading Typography settings on the Style tab to control visual appearance independently of the tag level.

Text Supports: Field Connections

The body text displayed below the heading. Uses a rich text editor that supports basic formatting including bold, italic, and inline links.

Style Tab

The Style tab controls the callout's background, border, layout alignment, padding, and the color and typography of both the heading and the body text.

Background Color Supports: Field Connections

Sets the background color for the entire callout container. Supports full alpha transparency.

Border settings

Border settings control border style, width, color, radius, and related responsive border controls where available.

Alignment Default: Left; Supports: Responsive

Controls the horizontal alignment of all elements within the callout — heading, text, image or icon, and button.

• Left: Aligns all elements to the left edge.
• Center: Centers all elements.
• Right: Aligns all elements to the right edge.

Padding Supports: Responsive

Sets the spacing between the callout container's edge and its inner content.

Heading

Style settings for the callout heading.

Heading style settings

Heading Color Supports: Field Connections

Sets the text color of the heading, including the state when the heading is used as a link.

Heading Typography Supports: Responsive

Font settings for the callout heading.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Text

Style settings for the body text and any text-type call-to-action link.

Text style settings

Text Color Supports: Field Connections

Sets the color of the body text. Also applies to link text when CTA Type is set to Link.

Text Typography Supports: Responsive

Font settings for the body text and link text.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Image Tab

The Image tab lets you add an optional visual element to the callout — either a photo from the media library or an icon from the icon picker.

Image Type Default: Photo

Determines the type of visual element displayed in the callout.

• None: No image or icon is shown.
• Photo: Displays an image selected from the WordPress media library.
• Icon: Displays an icon selected from the icon picker.

Photo settings

Photo

Settings for selecting and positioning the photo.

Photo source and position

Photo Supports: Field Connections

Select an image from the WordPress media library.

Position Default: Above Heading

Controls where the photo appears relative to the callout content.

• Above Heading: Photo sits above the heading and text.
• Below Heading: Photo appears between the heading and the body text.
• Left of Text and Heading: Photo is placed to the left of both the heading and text as a column.
• Right of Text and Heading: Photo is placed to the right of both the heading and text as a column.

Photo Style

Styling options for the photo's shape, size, alignment, and border.

Photo style settings

Crop

Crops the photo into a predefined shape. Options: None, Landscape, Panorama, Portrait, Square, Circle.

Width Supports: Responsive

Sets a maximum width for the photo. Accepts values in px, vw, or %. When left blank, the image width is determined by the size selected in the Photo field.

Align Supports: Responsive

Aligns the photo within its column space. When the photo is positioned left or right, this aligns the photo within that column.

• Left: Aligns the photo to the left.
• Center: Centers the photo.
• Right: Aligns the photo to the right.

Border Supports: Responsive

Applies a border to the photo element including radius, which rounds the photo corners or creates a circle effect when combined with a square crop.

Icon settings

Icon

Settings for selecting and positioning the icon.

Icon source and position

Icon

Select an icon using the icon picker.

Screen Reader Text

A text label read by screen readers but not displayed visually. Use this to provide an accessible description when the icon conveys meaning without accompanying visible text.

Position Default: Left of Heading

Controls where the icon appears relative to the callout content.

• Above Heading: Icon sits above the heading.
• Below Heading: Icon appears between the heading and body text.
• Left of Heading: Icon is inline to the left of the heading text only; the body text and button flow below both.
• Right of Heading: Icon is inline to the right of the heading text only.
• Left of Text and Heading: Icon is placed to the left of both the heading and text as a side column.
• Right of Text and Heading: Icon is placed to the right of both the heading and text as a side column.

Icon Colors

Color settings for the icon and its optional background.

Icon color settings

DuoTone Primary Color (DuoTone Icons Only) Supports: Field Connections

Sets the primary (foreground) color for DuoTone icon styles.

DuoTone Secondary Color (DuoTone Icons Only) Supports: Field Connections

Sets the secondary color for DuoTone icon styles.

Color Supports: Field Connections

Sets the default icon color. When not specified, the theme's default accent color is used.

Hover Color Supports: Field Connections

Sets the icon color when a visitor hovers over the callout. When not specified, the default accent color is used.

Background Color Supports: Field Connections

Adds a circular background shape behind the icon. When no color is set, no background is shown.

Background Hover Color Supports: Field Connections

Sets the background color on hover. When not specified, the Background Color value is used.

Gradient Default: No

Applies a gradient effect to the icon background.

• No: No gradient is applied.
• Yes: Enables the gradient on the icon background.

Icon Structure

Controls the size of the icon.

Icon size settings

Size Default: 30px; Supports: Responsive

Sets the icon's font size. Accepts values in px, em, or rem units.

Link Tab

The Link tab configures the module-level link and the call-to-action element displayed in the callout.

Link Supports: Field Connections

Sets the URL the callout links to. This link is applied to the heading, the photo or icon, and any call-to-action button or link text defined below.

Link settings

Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.

Call to Action

Configures the call-to-action element shown below the body text.

CTA settings

Type Default: None

Selects the style of call-to-action displayed.

• None: No call-to-action is shown. Any link set in the Link section above still applies to the heading and image.
• Link: Displays the CTA as styled hyperlink text.
• Button: Displays the CTA as a styled button.

Link CTA settings

Text Default: Read More; Supports: Field Connections

The label displayed on the link.

Link Color Supports: Field Connections

Sets the default text color for the CTA link.

Link Hover Color Supports: Field Connections

Sets the text color when the CTA link is hovered or focused.

Link Typography Supports: Responsive

Font settings for the CTA link text.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Button CTA settings

Text Default: Read More; Supports: Field Connections

The label displayed on the button.

Button Icon

Adds an optional icon to the button. Select an icon from the icon picker to display alongside the button text.

Button icon settings

Button Icon Position Default: Before Text

Controls whether the icon appears before or after the button text.

• Before Text: Icon is shown to the left of the label.
• After Text: Icon is shown to the right of the label.

Button Icon Visibility Default: Always Visible

Controls when the icon is visible.

• Always Visible: Icon is shown at all times.
• Fade In On Hover: Icon is revealed only when the button is hovered.

DuoTone Primary Color (DuoTone Icons Only) Supports: Field Connections

Sets the primary color for DuoTone button icon styles.

DuoTone Secondary Color (DuoTone Icons Only) Supports: Field Connections

Sets the secondary color for DuoTone button icon styles.

Button Width Default: Auto

Sets whether the button sizes to its content or expands to fill the full container width.

• Auto: Button width is determined by its content.
• Full Width: Button stretches to fill the full width of the callout.

Auto width settings

Button Align Supports: Responsive

Aligns the button horizontally within the callout. Available when Button Width is set to Auto.

Button Padding Supports: Responsive

Sets internal spacing around the button text and icon.

Button Text Color Supports: Field Connections

Sets the default color of the button text.

Button Text Hover Color Supports: Field Connections

Sets the text color when the button is hovered or focused.

Button Typography Supports: Responsive

Font settings for the button label.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Button Background Style Default: Flat

Selects the background rendering mode for the button.

• Flat: Solid background color.
• Auto Gradient: Automatically generates a gradient from the button background color.
• Advanced Gradient: Uses gradient pickers for full gradient control.

Flat background settings

Button Background Color Supports: Field Connections

Sets the button's background color.

Button Background Hover Color Supports: Field Connections

Sets the background color on hover.

Button Background Animation Default: Disabled

Animates the background color transition on hover.

• Disabled: No animation.
• Enabled: Background color animates on hover.

Auto gradient settings

Button Background Color Supports: Field Connections

Sets the button's background color used to generate the gradient.

Button Background Hover Color Supports: Field Connections

Sets the background color on hover used to generate the hover gradient.

Advanced gradient settings

Background Gradient

Configures the button background gradient.

Background Hover Gradient

Configures the button background hover gradient.

Button Border

Applies a border to the button.

Button border settings

Button Border Supports: Responsive

Configure the button border style, width, color, and radius.

Button Border Hover Color Supports: Field Connections

Sets the border color when the button is hovered or focused.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.

CSS Customization

Use custom CSS to style the Callout module beyond the available settings.

tip

The examples below target the .fl-module-callout parent class, which applies styles to all Callout modules on your site.

To style a specific Callout module, assign it a custom class on the Advanced tab and replace .fl-module-callout with your custom class name.

.my-custom-class .fl-callout-title {
  color: #333333;
}

Callout Heading

Style the callout heading text.

.fl-module-callout .fl-callout-title {
  font-size: 24px;
  font-weight: 700;
  color: #222222;
}

Callout Body Text

Style the callout's body text content.

.fl-module-callout .fl-callout-text {
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
}

Callout Photo

Add styles to the callout photo, such as a drop shadow or hover effect.

/* Add a drop shadow to the photo */
.fl-module-callout .fl-photo-img {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Scale the photo on hover */
.fl-module-callout .fl-callout-photo:hover .fl-photo-img {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}

CTA Link Text

Style the call-to-action link text when CTA Type is set to Link.

.fl-module-callout .fl-callout-cta-link {
  font-weight: 600;
  text-decoration: underline;
}

.fl-module-callout .fl-callout-cta-link:hover {
  text-decoration: none;
}