Promo

Promo is a brief message and call to action intended to draw attention to promoted or related content.

Usage

Use Promo to draw attention to promoted or related content, e.g. to link a refinance calculator in an article on the refinance process.

Guidelines

• The text content of Promo should be kept concise.
• Keep the length of the title and subtitle to one line each.

Variants

Default

The default Promo contains text and a call to action.

Flag

The Flag variant displays text near a small image. This variant is useful when you want to incorporate an image while keeping the greatest emphasis on the text.

With Image

The Image variant includes an image that takes up half the width of the Promo. This is useful when you want to include an image with equal prominence to the text.

To preserve the aspect ratio of Promo, the image height will stay consistent with the height of the text content area. If there isn’t room for the full width of the image it will be cut off on the sides without distorting the image.

With Image (Reversed)

Identical to the With Image variant with the image on the opposite side.

Anatomy

• Promo should have a heading.
• Promo may have a sub-heading.
• Promo must have text body content.
• Promo should have a Button.
• Promo may have an image.

Accessibility

• If the Promo has an image, you must add a descriptive alt attribute for screen readers.