Explore four practical configurations of the Tabs block. Each example contains real nested blocks and supports mouse, touch, and keyboard navigation.
Default tabs
A familiar horizontal layout for organizing related information without hiding the structure of the page.
A clear overview
Introduce the topic with the essential context visitors need before they explore the details.
A simple workflow
Break a process into a focused panel so readers can move through the information at their own pace.
The expected outcome
Close with measurable results, a concise conclusion, or the next action you want visitors to take.
Minimal, centered navigation
The Minimal style keeps the controls light and works well inside editorial pages, documentation, and compact product sections.
Product summary
Present the primary value proposition in a short, scannable introduction.
Useful details first
This example opens on the second tab, demonstrating how any panel can be selected as the initial active state.
Support information
Keep onboarding guidance, common questions, or contact options close to the product information.
Pill tabs with icons
The Pills style creates prominent controls for pricing, packages, audience segments, or other high-level choices.
Starter plan
A focused foundation for individuals and small teams launching their first campaign.
Growth plan
Expanded tools for established teams that need repeatable workflows and clearer performance insights.
Scale plan
Flexible controls for larger organizations coordinating multiple products, audiences, or regions.
Boxed vertical tabs
A vertical tab list is a strong fit for dashboards, service descriptions, onboarding flows, and content with longer labels.
Strategy that stays visible
Use the first panel for goals, positioning, and the decisions that guide the rest of the work.
Connected collaboration
Explain roles, handoffs, shared resources, or the communication rhythm that keeps a team aligned.
Analytics with context
Pair metrics with interpretation so visitors understand what changed, why it matters, and what happens next.