Carousels are used to fit a lot of content into a small space. Because carousels are common anti-patterns, this component is used by approval only.

For more information on how carousels are anti-patterns and should generally be avoided, read Anatomy, Anti-patterns.

See an example of this component on the Boston Scientific home page.

Usage guidelines

Approval is required to use this component. This component is only available for use on the home page template in the hero container for the US site.

Guidelines for creating a more effective carousel:

  • Never automatically transition slides
  • Don’t add more than three slides
  • Keep slide titles and descriptions short and concise
    • The slide titles will be h1s, so keep that in mind when writing content
  • Never use a full-height background color on the hero container because it obscures the slide controls
  • Apply the same teaser type to all slides

Image behavior

Each slide can have differing image heights. For best results, make each image for each slide the same size.

Hero container

See the hero patterns page for more information on options within the hero container.

Authoring guidelines

  1. Create new page using “HomePage Template”
  2. Set the hero container layout to responsive grid
  3. Add the Carousel component, listed under EWP-CORE
  4. Next add a Teaser component within the Carousel — don’t go over three slides
  5. Select the Teaser Hero Type — we recommend the “Hero with Overlapping Text Block” type
  6. Add images and content — make sure to size the images at the same height and keep h1s short and concise