Tab navigation components for organizing content into separate sections.
Pestañas como encabezado de tarjeta (misma altura)
Tarjeta normal
This is a regular card with a header. The header has a min-height of 40px.
Tabs replace the header using TabsContainer card. The tabs row has the same height (40px) as a card header.
Details content.
Settings content.
Pestañas de tarjeta (integradas)
Resumen
Card tabs integrate seamlessly.
Pestañas independientes
Inicio
Standalone tabs work anywhere.
Perfil
User profile information here.
Mensajes
Messages and conversations.
Configuración
Application settings here.
Pestañas con iconos
Home with icons.
Profile with icons.
Messages with icons.
Settings with icons.
Pestañas de ancho fijo
minwr-{n} / wr-{n} / maxwr-{n} (rem width) on a tab item — n = 1–10, 15, 20…50. minwr-* sets a floor (short labels align, long ones still grow); wr-* pins an exact width.
Ancho mínimo 6rem (minwr-6)
Fixed width tabs maintain consistent sizing.
Edit content here.
Delete operations here.
Ancho mínimo 8rem con iconos (minwr-8)
Dashboard data.
Analytics data.
Ajustar etiquetas (títulos de varias líneas)
--full stretches the short tabs into dead space,
and plain auto width leaves the long one huge and the edge ragged.
pa-tabs--wrap-labels lets the long title wrap; cap it with
maxwr-* to choose the wrap point. The row then keeps every tab as tall
as the wrapped one — no zig-zag — via the flex row's default
align-items: stretch.
Default (auto width, no wrap) — ragged, long tab dominates
Orders content.
Invoices content.
Delivery sheets content.
Complaints content.
With <.tabs is_wrap_labels> + maxwr-15 on the long tab — tidy, level
Orders content — the long tab wraps to two lines; the short tabs stretch to match its height.
Invoices content.
Delivery sheets content.
Complaints content.
Pestañas estilo píldora
Panel
Key metrics overview.
Analítica
Detailed insights.
Informes
Generated summaries.
Píldoras con iconos
Dashboard pills.
Analytics pills.
Reports pills.
Pestañas verticales
Configuración de la cuenta
Manage your account information and preferences.
Configuración de seguridad
Configure password and two-factor authentication.
Preferencias de notificación
Control how and when you receive notifications.
Opciones de apariencia
Customize the look and feel of your interface.
Pestañas con caja
Code repository and file browser.
Issue tracker and bug reports.
Pull request reviews and merges.
Tamaños de pestaña
Pestañas pequeñas
Small tabs content - compact and space-efficient.
Small tabs - Tab 2
Small tabs - Tab 3
Pestañas predeterminadas
Default size tabs content - standard spacing.
Default tabs - Tab 2
Default tabs - Tab 3
Pestañas grandes
Large tabs content - more generous spacing.
Large tabs - Tab 2
Large tabs - Tab 3
Pestañas con insignias
All items (48 total).
Active items (12 items).
Pending items (5 items).
Closed items (31 items).
Pestañas centradas
Feature highlights and capabilities.
Pricing plans and options.
Customer testimonials and reviews.
Pestañas de ancho completo
Mobile view and responsive design.
Tablet view and layout.
Desktop view and features.
Pestañas con borde superior
Active indicator on top instead of bottom. Useful for profile panels and similar UI patterns.
Favorites content.
Settings content.
Borde superior + Ancho completo
Full width border-top tabs with icons. Clean profile panel style.
Favorites content.
Settings content.
Pestañas solo con icono - Horizontal
Panel
Icon-only tabs save space.
Analítica
Analytics data here.
Usuarios
User management here.
Configuración
Settings here.
Pestañas solo con icono - Vertical
Inicio
Vertical icon-only tabs with centered icons.
Perfil
Profile settings.
Mensajes
Message inbox.
Configuración
Application settings.
Pestañas independientes: no requieren tarjeta
Sección de resumen
Tabs can exist outside of cards for page-level navigation. Each tab can contain cards or any other content.
Sección de detalles
This pattern is useful for organizing page content into sections.
Sección de informes
The tab content can include multiple cards or complex layouts.
Pestañas verticales independientes
Panel
Vertical tabs work great for sidebar-style navigation outside of cards.
Analítica
Analytics content goes here.
Usuarios
User management content here.
Pestañas en línea en el encabezado (alineación a la misma altura)
Tarjeta con título + pestañas en línea
Inline tabs sit in the header row, so this card has the same header height as the card next to it.
Tarjeta normal (solo encabezado)
This card has no tabs - just a header. Notice how both card headers align perfectly when side by side.
Use has_inline_tabs prop 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.
Estadísticas de resumen
Cards with different header content still align because inline tabs use the same header height.
Pestañas con borde - Contenedor tipo tarjeta
Panel
Bordered tabs wrap the entire tab system in a card-like border. The content has no separate border - it's all unified.
Configuración
This pattern works well for standalone tabs that need visual separation from the page background.
Perfil
Use pa-tabs__container--bordered wrapper for horizontal tabs.
Pestañas verticales con borde
Resumen
Bordered vertical tabs create a unified card-like appearance.
The border wraps both the tab navigation and content area with a divider between them.
Informes
Perfect for sidebar-style navigation that needs to stand out.
Configuración
Use pa-tabs__vertical-layout--bordered modifier for vertical tabs.
Títulos de pestaña largos en espacio limitado
Predeterminado (ajuste)
Default behavior - tabs wrap to multiple lines when needed.
User Management System content.
Reports & Analytics content.
Settings & Configuration content.
Modificador de colapso
Collapse mode - inactive tabs show only icons, active tab shows full title.
User Management content.
Reports content.
Settings content.
Modificador desplazable
Scrollable tabs - scroll horizontally to see more tabs.
User Management content.
Reports content.
Settings content.