Promo Boxes

Promotional call-to-action box with heading, subtext, and CTA button. Supports default, border, light, and dark styles. It is shown in the block inserter as Canvas Promo Box and registered as canvas-core/promo-box.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

• HeadingDefaultTry Premium Free for 30 Days and you'll never regret it!

  HTML allowed. Use to highlight words.

• SubtextDefaultStarts at just $9.99/month afterwards. No Ads, No Gimmicks and No SPAM.

  Description below the heading. HTML allowed.

• Heading TagDefaultH3

  Heading level the promo headline takes. Choose a paragraph or a plain container to keep the promo out of the page outline.

  ChoicesH1H2H3H4H5H6pdiv

• Button TextDefaultStart Trial

  Wording on the call-to-action button.

• Button URLDefault#

  Where that button sends a visitor.

• Button StyleDefaultCanvas Circle

  How the button is drawn: one of the theme shapes, or a colour from the framework palette.

  ChoicesCanvas CircleCanvas RoundedCanvas Rounded BlackCanvas Border LightCanvas Circle BlackBootstrap PrimaryBootstrap SecondaryBootstrap SuccessBootstrap DangerBootstrap WarningBootstrap InfoBootstrap Darkand 6 more

• Button Classes (override)DefaultEmpty

  Replaces the Button Style preset entirely (including the m-0 the presets add). Leave empty to use the preset.

• Button IconDefaultEmpty

  Icon rendered inside the CTA before its label. Required by the reveal button style, which slides the label out from behind the icon. Empty renders the label alone.

• Button Before ContentDefaultOff

  Place the button on the left (reversed row).

Style

• Uppercase TextDefaultOff

  Sets the whole promo in capitals, and resizes the headline and its supporting line to suit.

• Mini / CompactDefaultOff

  Smaller variant suitable for grid layouts.

• Full WidthDefaultOff

  Removes side border-radius and wraps content in a container div.

• Text AlignmentDefaultLeft

  Which way the headline and its supporting line are aligned inside the box.

  ChoicesLeftCenterRight

• Padding UtilityDefaultEmpty

  How much room sits between the box edge and its contents, written as spacing utility classes. Leave it empty for the standard amount, or enter "none" to remove the padding entirely. A parallax promo sets its own.

• Background Color PresetDefaultEmpty

  Colour behind the promo, taken from the theme palette. Default keeps the plain dark panel.

  ChoicesDefault (empty)Theme ColorPrimaryDangerInfoSuccessWarningDarkShown when Box Style is "Dark Background"

• Parallax Background Image URLDefaultEmpty

  Works with Dark style only. Adds parallax scrolling background.

  Shown when Box Style is "Dark Background"

• Box StyleDefaultDefault (No Background)

  How the promo is set off from the page around it: nothing at all, an outline, a tinted panel, or a dark panel with light text.

  ChoicesDefault (No Background)BorderLight BackgroundDark Background

Style tab

• Heading Color

  A style control in the Heading group of the Style tab. It has a hover state as well as a resting one.

• Subtext Color

  A style control in the Subtext group of the Style tab.

• Subtext Font Size

  A style control in the Subtext group of the Style tab.

• Light Background

  A style control in the Background group of the Style tab.

• Dark Background

  A style control in the Background group of the Style tab.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.