Campaign carousel

PATTERN OVERVIEW

Feature three to five promotional banners in a carousel as the hero or added lower on the page. By default the carousel auto advances to the next slide in intervals of 5 seconds. Controls and a progress bar allow users to advance to the next slide. 
 

Guidelines

• This pattern has a fixed layout for desktop and mobile requiring one image for desktop/tablet landscape and a second for mobile/tablet portrait viewports.
  
  
• The copy for the desktop and mobile experience is added using separate input fields and then styled using the heading and font styles available in the text editor.
  
  
• When the carousel is used as the hero, do not use more than one H1 tag per carousel.
  
  
• If the auto advance feature is enabled, be sure that the interval set allows enough time for a user to read the copy on the slide.
  
  
• An alt tag is added to the image to meet accessibility standards. See alt text and image standards info. 
  
  
• The artwork for the banner must be prepared so that the copy, user controls and progression bar contrast from the background image to meet accessibility standards.
• • For large text (18px or larger) maintain a color contrast ratio of at least 3:1 and normal text (less than 18px) 4.5:1.
  • To check color contrast ratios, use the contrast checker tool: https://webaim.org/resources/contrastchecker.

• The banner image will behave in a responsive manner resizing to fit the width of the viewport. As the image resizes make sure that the copy remains legible and to review the carousel on multiple devices (desktop, tablet and mobile) and the breakpoints listed below to assure that the content is displaying as intended. 
  • 375 x 667 px
  • 768 x 1024 px
  • 1024 x 768 px
• Marketers/PMs/AEM authors must work with the DMX team when planning and setting up a campaign carousel. 

AEM component: Use the DPL Campaign Carousel component to build this pattern.

Best practices

• Keep in mind that users typically do not look in a carousel for finding important information, therefore adding critical content within the carousel is typically not a good option.
  
  
• Use a carousel to save the user time or help them to digest content, and when the content has a clear message.
• 
  
• Ideally it best to position the copy and CTAs in the same location on each slide, making it easier for a user to read and interact with the CTA button.
   

Options

• Content authors will have the capability to turn off the auto advancement of slides or adjust the length of intervals in seconds (minimum 3 seconds, maximum 120 seconds).
  
  
• Add the link to the banner (entire banner is clickable) OR add a button.
  
  
• The user controls can be set to use a blue (#316BBE) button with a white (#FFFFFF) arrow or white button with a blue arrow. Use the option that meets contrast ratio requirements based on the image being used.
  
  
• A notch (50% white transparent bar) can be added behind the progress bar to improve the contrast between the background image and progress bar.
  
  
• Horizontal alignment of the text area: Position the copy on the left, center, or the right side of the background image.
  
  
• Vertical alignment of the text area: Position the copy at the top, bottom, or the middle of the background image.
  
  
• Copy within the text area can be left or centered aligned.
  
  
• The carousel can be set to have a 20 px bottom margin or turned off.

specifications

• Image size (requires both):
  • Desktop/ iPad landscape: 1548 (w) x 380 (h) px
  • Mobile/ iPad portrait: 960 (w) x 960 (h) px