Promo

Overview

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

Sample component

Style

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.

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.

Usage

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.

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.

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.

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.

Best practices

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

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

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

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

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

Responsive design

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

Tablet

Mobile

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

Interaction states

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

Spacing

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