Full-Width Tab Carousel

Use the full-width tab carousel component to show related content in one large, easy-to-scan area. It works well for featured stories, product highlights, service options, or grouped page sections.

Content attributes

• Headline
• Background Image / Colour
• Tab Carousel Items
  • Description text
  • Image / SVG
  • Optional Link

When to Use This Component

• Use it when several pieces of content belong together.
• Use tabs when visitors should choose what to view.
• Use a carousel when you want content to rotate or move in sequence.
• Keep each tab or slide focused on one main idea.

How to Add the Component

• Open the webpage in edit mode.
• Choose the area where the component should appear.
• Add the carousel or tabs component to the page.
• Add each tab or slide inside the component.
• Name each tab or slide clearly.
• Place content, images, or calls to action inside each panel.
• Reorder the panels so the most important content appears first.
• Preview the page before publishing.

Content Tips

• Use short headings.
• Keep body copy brief.
• Use the same content pattern for each tab or slide.
• Add clear button text when a next step is needed.
• Avoid adding too many panels. Fewer options are easier to use.

Layout Tips

• Place the component where it supports the page goal.
• Use full width for high-priority content.
• Keep important text visible without extra clicks when possible.
• Check how the layout looks on desktop and mobile.
• Make sure images are clear and cropped correctly.

Settings to Review

• Active item: Choose which tab or slide appears first.
• Auto-transition: Decide if slides should move on their own.
• Transition delay: Set enough time for visitors to read the content.
• Pause on hover: Keep this on when possible so visitors can control the experience.
• Accessibility labels: Add clear labels so assistive technology can describe the component.

Before You Publish

• Review each tab or slide for accuracy.
• Test all links and buttons.
• Confirm the order makes sense.
• Check the page on mobile.
• Ask another person to review the page if the content is high visibility.