Ribbon

PATTERN OVERVIEW

This pattern uses a single image, heading and copy to promote an item in a compact ribbon. 

Guidelines

• Apply a <p> tag to the heading and apply the size of the heading using the "delta" class.
• Use light gray background for medium emphasis, add a white inset box for more emphasis on the content.
• If a background color appears above and below the ribbon, the background color can be set to none.

AEM component: Use the Text3 and icon picker component to build this pattern.

specifications

Heading: Recommended character count is 45-60 characters (including spaces).

Body copy: Character count is about 140 characters (including spaces). 

Button: Maximum 25 characters (including spaces).  

Image size: 540 x 360 px (16:9 ratio).

Type: For headings, use sentence case, no punctuation (unless necessary, such as a question mark). For subheadings and body copy, use sentence case with complete and punctuated sentences.

Type alignment: Left aligned