Tab navigation components for organizing content into separate sections.
Tabs as Card Header (Same Height)
Normal Card
This is a regular card with a header. The header has a min-height of 40px.
Tabs replace the header using pa-tabs__container--card. The tabs row has the same height (40px) as a card header. Overflow tabs are in the dropdown menu.
Details content.
Settings content.
History content.
Logs content.
Audit Trail content.
Permissions content.
Card Tabs (Built-in)
Overview
Card tabs integrate seamlessly.
Details
Detailed information goes here.
Settings
Configuration options here.
Reports
Analytics data displayed here.
Standalone Tabs
Home
Standalone tabs work anywhere.
Profile
User profile information here.
Messages
Messages and conversations.
Settings
Application settings here.
Tabs with Icons
Home with icons.
Profile with icons.
Messages with icons.
Settings with icons.
Fixed Width Tabs
pa-tabs__item--w-1x through pa-tabs__item--w-10x for 1rem to 10rem min-width.
6x Width (6rem each)
Fixed width tabs maintain consistent sizing.
Edit content here.
Delete operations here.
8x Width (8rem each)
Dashboard data.
Analytics data.
Pills Style Tabs
Dashboard
Key metrics overview.
Analytics
Detailed insights.
Reports
Generated summaries.
Pills with Icons
Dashboard pills.
Analytics pills.
Reports pills.
Vertical Tabs
Account Settings
Manage your account information and preferences.
Security Settings
Configure password and two-factor authentication.
Notification Preferences
Control how and when you receive notifications.
Appearance Options
Customize the look and feel of your interface.
Boxed Tabs
Code repository and file browser.
Issue tracker and bug reports.
Pull request reviews and merges.
Tab Sizes
Small Tabs
Small tabs content - compact and space-efficient.
Small tabs - Tab 2
Small tabs - Tab 3
Default Tabs
Default size tabs content - standard spacing.
Default tabs - Tab 2
Default tabs - Tab 3
Large Tabs
Large tabs content - more generous spacing.
Large tabs - Tab 2
Large tabs - Tab 3
Tabs with Badges
All items (48 total).
Active items (12 items).
Pending items (5 items).
Closed items (31 items).
Centered Tabs
Feature highlights and capabilities.
Pricing plans and options.
Customer testimonials and reviews.
Full Width Tabs
Mobile view and responsive design.
Tablet view and layout.
Desktop view and features.
Border Top Tabs
Active indicator on top instead of bottom. Useful for profile panels and similar UI patterns.
Favorites content here.
Settings content here.
Border Top + Full Width
Combines --border-top with --full for equal-width tabs with top indicator.
Favorites panel content.
Icon-Only Tabs - Horizontal
Dashboard
Icon-only tabs save space.
Analytics
Analytics data here.
Users
User management here.
Settings
Settings here.
Icon-Only Tabs - Vertical
Home
Vertical icon-only tabs with centered icons.
Profile
Profile settings.
Messages
Message inbox.
Settings
Application settings.
Standalone Tabs - No Card Required
Overview Section
Tabs can exist outside of cards for page-level navigation. Each tab can contain cards or any other content.
Details Section
This pattern is useful for organizing page content into sections.
Reports Section
The tab content can include multiple cards or complex layouts.
Standalone Vertical Tabs
Dashboard
Vertical tabs work great for sidebar-style navigation outside of cards.
Analytics
Analytics content goes here.
Users
User management content here.
Inline Tabs in Header (Same Height Alignment)
Card with Title + Inline Tabs
Inline tabs sit in the header row, so this card has the same header height as the card next to it.
Pending items content.
Closed items content.
Regular Card (Header Only)
This card has no tabs - just a header. Notice how both card headers align perfectly when side by side.
Use pa-card__tabs--inline when you need cards with tabs to match the height of cards without tabs.
Tabs can also be used alone in the header without a title.
Details content.
Settings content.
Summary Stats
Cards with different header content still align because inline tabs use the same header height.
Bordered Tabs - Card-Like Wrapper
Dashboard
Bordered tabs wrap the entire tab system in a card-like border. The content has no separate border - it's all unified.
Settings
This pattern works well for standalone tabs that need visual separation from the page background.
Profile
Use pa-tabs__container--bordered wrapper for horizontal tabs.
Bordered Vertical Tabs
Overview
Bordered vertical tabs create a unified card-like appearance.
The border wraps both the tab navigation and content area with a divider between them.
Reports
Perfect for sidebar-style navigation that needs to stand out.
Settings
Use pa-tabs__vertical-layout--bordered modifier for vertical tabs.
Long Tab Titles in Constrained Space
Default (Wrap)
Default behavior - tabs wrap to multiple lines when needed.
User Management System content.
Reports & Analytics content.
Settings & Configuration content.
Collapse Modifier
Collapse mode - inactive tabs show only icons, active tab shows full title.
User Management content.
Reports content.
Settings content.
Scrollable Modifier
Scrollable tabs with pa-tabs--scrollable modifier - click arrows to scroll.
User Management content.
Reports content.
Settings content.
Scrollable Tabs - Full Width Demo
Scrollable Pills
Dashboard Overview - arrows appear when tabs overflow the container.
Organizations Tree content.
User Management content.
Reports content.
Settings content.
Security content.
Audit logs content.
CSS Classes Reference
Tabs Base
pa-tabs- Base tabs containerpa-tabs__item- Individual tab buttonpa-tabs__item--active- Active tab statepa-tabs__content- Content wrapperpa-tabs__panel- Tab panel (hidden by default)pa-tabs__panel--active- Active/visible panel
Tab Styles
pa-tabs--pills- Rounded pill-style tabspa-tabs--boxed- Boxed tabs with backgroundpa-tabs--vertical- Vertical tab layoutpa-tabs--border-top- Active indicator on top
Tab Modifiers
pa-tabs--sm- Small sizepa-tabs--lg- Large sizepa-tabs--centered- Center-aligned tabspa-tabs--full- Full width (equal-width tabs)pa-tabs--nowrap- Prevent wrappingpa-tabs--collapse- Icon-only until activepa-tabs--scrollable- Horizontal scroll with arrows
Scrollable Tabs Elements
pa-tabs__scroll-container- Scrollable inner containerpa-tabs__scroll-btn- Scroll arrow buttonpa-tabs__scroll-btn--left/--right- Arrow directionpa-tabs__scroll-btn--visible- Show arrow
Container Wrappers
pa-tabs__container--bordered- Card-like border wrapperpa-tabs__container--card- Tabs as card headerpa-tabs__vertical-layout- Vertical tabs + content wrapperpa-tabs__vertical-layout--bordered- Bordered vertical layout
Overflow Menu (Card Header)
pa-tabs__overflow- Overflow containerpa-tabs__overflow-toggle- Overflow buttonpa-tabs__overflow-toggle--has-active- Active tab in overflowpa-tabs__overflow-menu- Dropdown menupa-tabs__overflow-menu--open- Open state