Tabbed Content Switchers
Create responsive tabbed content switchers that keep detailed information compact, easy to compare and accessible across screen sizes.
Organize information in a compact content switcher that lets users move between tabbed panels without leaving the page. It's perfect for product features, specifications, comparisons or FAQs.
Each panel can combine a title, meta text, content, image and link. Navigate between them with classic tabs, different subnav styles or a visual thumbnav that previews each panel with an image. You can size the thumbnails independently and even use a different image from the one shown in the content panel.
Place the navigation above, below, to the left or to the right of the content, then adjust its width, alignment and the breakpoint at which vertical layouts stack. For larger tab sets, keep all navigation items in a single scrollable row instead of wrapping them. Overflowing items fade toward the edge and can be scrolled horizontally, which feels especially natural on touch devices.
Position the image above, beside or between the title and content. In side-by-side layouts, you can control the image width, grid gap and stacking breakpoint independently.
Match the height of all content panels to prevent the page from shifting as users switch between them. When content fields are aligned side by side, expand the title area to keep shorter supporting content aligned at the opposite edge.
The switcher follows the WAI-ARIA tab pattern, so screen readers can identify the active tab and its associated content panel, while keyboard users can navigate between tabs without a mouse.
