Skip to contentSkip to component theme selector

Carousel

Carousels allow users to scroll through multiple pieces of content at once.

On this page

A carousel is used to help users browse a range of content without interrupting their journey through the rest of the page. Carousel tiles are flexible and it is up to the user what they put in them: for example images, cards, product cards etc. They are flexible in height or width, and all tiles should take on the height of the tallest tile.

When using a carousel:

  • Keep the type of content in the tiles consistent
  • They should always have controls, like arrow buttons, to indicate to the user that they are scrollable
  • The tiles in a carousel should always be interactive and allow users to navigate to another page
  • Keep the number of tiles within the carousel between 8 and 20 tiles

If you need to show more than 20 tiles in a carousel, show a select amount and then use a link to take the user to view the rest of your content.

With supporting text

Use supporting text under the heading to help convey to the use what they should expect to see this in the carousel.

Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Carousel HeadingSupporting Text
  1. Tile Content
    Swap Instance
  2. Tile Content
    Swap Instance
  3. Tile Content
    Swap Instance
  4. Tile Content
    Swap Instance
  5. Tile Content
    Swap Instance
  6. Tile Content
    Swap Instance
  7. Tile Content
    Swap Instance
  8. Tile Content
    Swap Instance
  9. Tile Content
    Swap Instance
  10. Tile Content
    Swap Instance
  11. Tile Content
    Swap Instance
  12. Tile Content
    Swap Instance
  13. Tile Content
    Swap Instance
  14. Tile Content
    Swap Instance
  15. Tile Content
    Swap Instance
  16. Tile Content
    Swap Instance
  17. Tile Content
    Swap Instance
  18. Tile Content
    Swap Instance
  19. Tile Content
    Swap Instance
  20. Tile Content
    Swap Instance
  21. See all items

With a link

If you need to add a lot of content to a carousel (20+) you should link to somewhere else. You can do this by including a link under the heading and a button tile at the end of the carousel.

Always use both the link and the button tile together, not just one or the other.

Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Carousel HeadingSee More
  1. Tile Content
    Swap Instance
  2. Tile Content
    Swap Instance
  3. Tile Content
    Swap Instance
  4. Tile Content
    Swap Instance
  5. Tile Content
    Swap Instance
  6. Tile Content
    Swap Instance
  7. Tile Content
    Swap Instance
  8. Tile Content
    Swap Instance
  9. Tile Content
    Swap Instance
  10. Tile Content
    Swap Instance
  11. Tile Content
    Swap Instance
  12. Tile Content
    Swap Instance
  13. Tile Content
    Swap Instance
  14. Tile Content
    Swap Instance
  15. Tile Content
    Swap Instance
  16. Tile Content
    Swap Instance
  17. Tile Content
    Swap Instance
  18. Tile Content
    Swap Instance
  19. Tile Content
    Swap Instance
  20. Tile Content
    Swap Instance
  21. See all items

A carousel can use any of the Displays 1-5 as its heading style. This is to help provide heirachy on the page among other elements.

Large Heading

Use a large heading, for example display 5, to draw attention to the carousel if it is high in the hierarchy of things on the page.

Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Carousel Heading
  1. Tile Content
    Swap Instance
  2. Tile Content
    Swap Instance
  3. Tile Content
    Swap Instance
  4. Tile Content
    Swap Instance
  5. Tile Content
    Swap Instance
  6. Tile Content
    Swap Instance
  7. Tile Content
    Swap Instance
  8. Tile Content
    Swap Instance
  9. Tile Content
    Swap Instance
  10. Tile Content
    Swap Instance
  11. Tile Content
    Swap Instance
  12. Tile Content
    Swap Instance
  13. Tile Content
    Swap Instance
  14. Tile Content
    Swap Instance
  15. Tile Content
    Swap Instance
  16. Tile Content
    Swap Instance
  17. Tile Content
    Swap Instance
  18. Tile Content
    Swap Instance
  19. Tile Content
    Swap Instance
  20. Tile Content
    Swap Instance
  21. See all items

Small heading

Use a small heading if the carousel is lower in the hierarchy of things on the page. For example, below we have used Display 3.

Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Carousel Heading
  1. Tile Content
    Swap Instance
  2. Tile Content
    Swap Instance
  3. Tile Content
    Swap Instance
  4. Tile Content
    Swap Instance
  5. Tile Content
    Swap Instance
  6. Tile Content
    Swap Instance
  7. Tile Content
    Swap Instance
  8. Tile Content
    Swap Instance
  9. Tile Content
    Swap Instance
  10. Tile Content
    Swap Instance
  11. Tile Content
    Swap Instance
  12. Tile Content
    Swap Instance
  13. Tile Content
    Swap Instance
  14. Tile Content
    Swap Instance
  15. Tile Content
    Swap Instance
  16. Tile Content
    Swap Instance
  17. Tile Content
    Swap Instance
  18. Tile Content
    Swap Instance
  19. Tile Content
    Swap Instance
  20. Tile Content
    Swap Instance
  21. See all items

Content guidelines

Keep carousel headings short, concise and descriptive of what can be found in the carousel.

Do
New In: Wine
Don't
Take a look at our latest wines in this week

Use supporting text when a heading alone isn’t enough to describe what's in the carousel.

Do
Red, white, rose, sparkling and low ABV
Don't
Take a look at our latest wines in this week, including red, white, rose, sparkling and low ABV. There’s something for everyone!

If using a link or the Button tile, keep the link copy concise and descriptive of where you are linking the user to.

Do
Don't

Was this page helpful?

Get in touch

Our team can answer any questions about using accordions or give you a helping hand with your next project.
Email
Microsoft Teams
Slack
Select a theme to demo: