This pattern is not yet in the Enterprise Code Library. See MF-273. Please email the Patterns Team for details and more information.

Carousels

Carousels allow a user to browse a small collection of featured products represented pictorially and possibly select one of them.

Also known as: carousel, slider,

Design Specs

Desktop/Tablet

Example of Default State

    Default State:
  1. Horizontal rule of 1px above section title that extends the width of the module, stroke color #AAAAAA. A horizontal rule of 1px below the bottom row of that extends the width of the module, stroke color #AAAAAA
  2. Section title is Enterprise T2 styling, Open Sans Light, 25px, Line Height 28px, font color primary #001733. Link. There is 20px of spacing above and below section title.
  3. Right and Left scroll buttons with arrows follow enterprise secondary button styling design. Link. Buttons are 72px height, 33px wide
. The arrow icon is from the SHC font icon library and is centered horizontally and vertically inside of button. The right and left scroll buttons have 10px of spacing on the right and left of the button
  4. Carousel product image is 180px x 180px with 10px of spacing above the image and 20px of spacing below the image.
  5. Crossed out price is Open Sans Regular 13px, in secondary gray color #666666 with a strike through.
  6. Red sale price is Enterprise T3 styling, Open Sans Semibold, 21px, Line Height of 26px, font color #D01833. There is 14px of spacing below the pricing.
  7. Carousel product title is Enterprise T5 styling and there is a max of 3 lines for the product titles. Overflow affordance is ellipses (…)
. Spacing below the product title is 14px.
  8. Star ratings follow the Enterprise Star Ratings pattern, for full specs see link.
  9. Carousel product cards in their hover state have a 1px stroke around entire card when in active state, #005ccc. Product title follows enterprise link style, underlined and text color #0055ccc.

Example of Hover State

Hover State:

  • Horizontal rule of 1px above section title that extends the width of the module, stroke color #AAAAAA. A horizontal rule of 1px below the bottom row of that extends the width of the module, stroke color #AAAAAA
  • Section title is Enterprise T2 styling, Open Sans Light, 25px, Line Height 28px, font color primary #001733. Link. There is 20px of spacing above and below section title.
  • Right and Left scroll buttons with arrows follow enterprise secondary button styling design. Link. Buttons are 72px height, 33px wide
. The arrow icon is from the SHC font icon library and is centered horizontally and vertically inside of button. The right and left scroll buttons have 10px of spacing on the right and left of the button
  • Carousel product image is 180px x 180px with 10px of spacing above the image and 20px of spacing below the image.
  • Crossed out price is Open Sans Regular 13px, in secondary gray color #666666 with a strike through.
  • Enter spec details here. HTML is allowed.

    Production Examples

    • Sears
    • Kmart

    Mobile

    An example of the mobile vertical carousel. The design is the same for sponsored and recommended carousels.

    An example of the mobile horizontal carousel. The design is the same for sponsored and recommended carousels.

    Desktop/Tablet

    An example of a Recommended Product Carousel. Sometimes titled 'Customers Who Viewed This Also Liked'.

    An example of a Sponsored Product Carousel.

    Mobile

    An example of the mobile vertical carousel. The design is the same for sponsored and recommended carousels.

    An example of the mobile horizontal carousel. The design is the same for sponsored and recommended carousels.

    Desktop/Tablet

    An example of a Recommended Product Carousel. Sometimes titled 'Customers Who Viewed This Also Liked'.

    An example of a Sponsored Product Carousel.

    ADA Compliance

    There are many accessibility requirements to ensure a carousel (sometimes referred to as slideshow) is ADA accessible. The major principle to carousel accessibility is allowing the user to stop all movement. Allowing users to control the movement of a slideshow is one of the four “non-interference” clauses in WCAG2.

    Requirements to ensure a carousel is fully accessible:

    1. Allow the user to stop all movement
    2. Provide visible controls accessible to the keyboard, mouse and touch
    3. Provide a valid and understandable focus order through the slideshow
    4. Valid coding and stylesheets
    5. Provide meaningful alternatives
    Useful Links:

    Research

    Carousel Usability: Designing an Effective UI for Websites with Content Overload

    Summary: Carousels allow multiple pieces of content to occupy a single, coveted space. This may placate corporate infighting, but on large- or small-view ports, people often scroll past carousels. A static hero or integrating content in the UI may be better solutions. But if a carousel is your hero, good navigation and content can help make it effective.

    view article

    Post a New Comment

    Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

    For general questions or assistance, email the Patterns Team directly.