Skip to main content

Tabs

Tabbed content panels — or, in the Media panel layout, a list-of-tabs beside a switching image (a feature/product showcase). Tabs: Content, Styling, Animations, Advanced.

Click/hover showcase vs. scroll-pinned

Set Layout → Media panel for a list on one side and an image that switches on click or hover (with optional Auto-rotate) on the other — each tab has its own image. For the scroll-pinned cinematic version (the image pins while steps scroll, Apple/Stripe style), use the Animation Engine → Scrollytelling module on a Section instead.

Content

Tabs options panel — Content tab
  • Tabs — a repeatable list; each tab has a Title, Content (rich text), an Image (used by the Media layout — its Content becomes the caption), an optional Badge, and an Active Tab switch.

Layout & style

OptionChoices
Tab StyleTabs (default), Pills, Underline, Segmented Toggle
Justified TabsOn/Off (stretch tabs to full width)
Tab AlignmentStart (default), Center, End
Tabs OrientationHorizontal, Vertical (Content layout)
LayoutContent panels (default) · Media panel (list + image)
Image SideImage Right (default) · Image Left (Media layout)
Activate OnClick (default) · Hover
Auto-rotateOn/Off, with an interval (seconds) — pauses on hover/focus
Fade AnimationOn/Off
Screenshots — tab styles & orientation

Capture each style and orientation: tabs-default, tabs-pills, tabs-underline, tabs-vertical.

Styling

Tabs options panel — Styling tab

Tab Title Color, Tab Content Color, Text Color, Background Color, and Margin & Padding.