TabsContent

Overview

This component is a required subcomponent of Tabs. All TabsContent need a value that matches its corresponding value on a TabsTrigger.

Children within a TabsContent can vary. For best results, use primary variant when the TabsContent contains content with utilities like PageSections (where content needs to reach the edge of the viewport for alternating background colors). Use secondary variant when the content contains small pagebuilder blocks. The variant is a prop on the parent Tabs component.

Examples

Basic Usage

Defaults to primary variant, which for TabContent is unstyled and unopinionated about how content should be laid out for maximum flexibility.

Variants

Primary

For best results in the primary variant, wrap content in a PageSection, which, when used with width="full", will align content to match the left and right edge of the portion of TabsList that contains the TabsTriggers.

PageSection when set to width="contained" may also be valid in some instances, but the result will be narrower than the TabList wrapper when viewed at larger screen sizes. Use the "Fullscreen" view to see result.

Secondary

The secondary variant is a bit more opinionated visually, and is intended for smaller content blocks, like ColumnLayout, media, and typography.

Props

Import

import { TabsContent } from '@im/integral/components/styled';