Action Strip

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

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 creates a full-width horizontal band that works as one clickable link. Use it between sections to prompt a next step — scheduling an appointment, learning more, contacting sales, or any short call to action.

Edit the headline inline in the editor. Set the destination URL in the block sidebar. The entire strip is the link, with an optional icon on the opposite side of the text.

When to use it

Action Strips work well as a bridge between content sections: after a portfolio grid, below a hero, or above a footer. Keep the copy short — one line reads best. Pair a subtle background color from your palette with reverse print when you need light text on a dark strip.

Tips

  • Spaced justification places the headline on one side and the icon on the other — the most common layout for CTA strips.
  • Choose an icon style (arrow, chevron, long arrow, etc.) that matches your site's visual language.
  • Increase padding when the strip feels cramped against neighboring sections.

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
  • Dark
  • Light
Color setting in the block editor sidebar
Color

Sets the strip background from your site color palette.

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.