Action Strip

Turn a horizontal band into a single, prominent CTA link.

Updated

Teal action strip between a hero and columns — spaced layout with light text and an arrow.
Teal action strip between a hero and columns — spaced layout with light text and an arrow.

Usage

The Action Strip is a full-width call to action band that works as one clickable link. Use it between sections to prompt a next step, like booking an appointment, contacting sales, or reading more.

Type the headline right in the editor and set Link URL in the sidebar. The whole strip is the link, with an optional icon beside the text.

When to use it

Action Strips work well as a bridge between sections: after a portfolio grid, below a hero, or above the footer. Keep the copy to one line. On a dark strip color, set Text Color to Light.

Tips

  • Spaced under Justify puts the headline on one side and the icon on the other, the most common layout for a CTA strip.
  • Increase Padding when the strip feels cramped against the sections around it.

Screenshots

Front-end

  • Purple action strip used as a CTA band above the footer.
    Purple action strip used as a CTA band above the footer.

Editor

  • Action Strip settings — link, padding, headline style, color, justify, and icon.
    Action Strip settings — link, padding, headline style, color, justify, and icon.

Settings

Link URL setting in the block editor sidebar
Link URL

Sets where the strip links when someone clicks it. The entire band is one link.

Padding setting in the block editor sidebar
Padding

Adds space above and below the headline inside the strip.

Headline Style setting in the block editor sidebar
Headline Style

Controls which visual style the headline uses. This does not change the underlying heading level.

  • <h1>Looks like your site's H1 style.
  • <h2> defaultLooks like your site's H2 style.
  • <h3>Looks like your site's H3 style.
  • <h4>Looks like your site's H4 style.
  • <h5>Looks like your site's H5 style.
  • <h6>Looks like your site's H6 style.
  • <p>Looks like normal paragraph text.
  • <strong>Looks like a bold paragraph.
Text Color setting in the block editor sidebar
Text Color

Light switches the strip's text to light colors for dark backgrounds. Choosing a Color picks Dark or Light for you, whichever reads better on that color; change it any time.

  • Dark
  • Light
Justify setting in the block editor sidebar
Justify

Controls how the headline and icon sit across the strip.

  • Spaced defaultHeadline on one side, icon on the other — the usual CTA strip layout.
  • CenterGroups the headline and icon together in the center.
  • StartGroups the headline and icon on the left.
  • EndGroups the headline and icon on the right.
Icon setting in the block editor sidebar
Icon
  • Arrowdefault
  • Chevron
  • Long Arrow
  • Double Chevron
  • Thick Arrow
Icon Size setting in the block editor sidebar
Icon Size

Makes the icon larger or smaller beside the headline.