Promo

A Promo is a full-width site banner used to promote or advertise an announcement like a product, feature, or event.

Promo banner

A promo banner has light, dark, saturated, and photo background options. It contains a headline, text, and a call to action that can be arranged differently depending on the variant and breakpoint.

Promo banner specs

Theme

Promo banner color theme
Promo banner gray theme
Promo banner dark theme
Promo banner imaged theme

Call to action

A promo banner features a Secondary call to action. Don’t change it to the Primary or Default style, even if other Secondary styles are used in the same area.


Layout

A promo banner always has three elements, a headline, text, and a call to action. These elements are arranged differently depending on the variant and breakpoint. On large screens, the promo banner background spans the width of a browser window. The content inside falls within a 12-column grid on large screens and a one-column grid on small screens.

Promo banner desktop layout
Promo banner mobile layout

Placement

A promo banner can be placed anywhere on a page below the hero and the fold, but be mindful of hierarchy. If content in a promo banner is less important or relevant than other content, it may be positioned lower on the page.

Promo banner placement

Color backgrounds

The promo banner default background color is blue. If other layouts nearby use a similar color or if they have the same visual weight, the page will become too heavy. Switch the background color to light gray so a user’s eye can rest. Alternatively, if there’s a lot of blue on the page, use the black background instead if it works in the layout.

Photo background

Use a photo background in a promo banner sparingly, as it can feel heavy. Always ensure that accessibility standards are being met when placing text and calls to action on a photo background (reversing the text and call to action colors or adding an overlay will help).

  • If a page already contains lots of photos or graphics, avoid using a promo banner with a photo background because the page will become heavier.
  • If a page is short or lacks visual interest, consider using a promo banner with a photo background.
Promo banner imaged wrong style
Promo banner imaged right style

Content

The content or offer being advertised in a promo banner should be secondary or even tertiary to the main message of the page so it doesn’t distract from the intended user experience.


Don't place a promo banner near another layout with equal or more visual weight.

Promo banner placement issue

Be mindful of using the black promo banner in a light environment because the contrast can be harsh.

Promo banner contrast issue

For better accessibility, don’t use light text on a light photo background without a dark overlay underneath.

Promo banner placement issue

Don't omit any of the three elements or change the call to action style.

Promo banner omitted elements issue

Don't include links in the text, the only link that should be featured is the call to action.

Promo banner link text issue

Breakpoints

A promo banner works well across both large and small screens. The elements in both variants will stack in one column and become vertically-aligned on small screens.

Desktop

Promo banner responsive desktop

Tablet

Promo banner responsive tablet

Mobile

Promo banner responsive mobile

Some text styles reduce in size on small screens. Learn more about typography on mobile


The only interactive element in a promo banner is the call to action.


Both promo banner variants use PatternFly 4 spacers to define spacing values between elements.

Promo banner spec spacing
Promo banner spec spacing small

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.