Flexible content containers for organizing and displaying information.
Tarjetas de la misma altura
Use sameHeight on Grid to make all cards in a row match the height of the tallest card.
Tarjeta corta
This card has minimal content.
Tarjeta alta
This card has much more content than the others, making it naturally taller.
All sibling cards will stretch to match this height thanks to the sameHeight prop on Grid.
This is useful for dashboard layouts where visual consistency matters.
Tarjeta mediana
This card also stretches to match the tallest card in the row.
Tarjetas básicas
Tarjeta simple
This is a basic card with just a body. Perfect for simple content display.
Tarjeta con encabezado
This card includes a header section for titles and actions.
Tarjeta con pie
This card includes a footer section for actions or meta information.
Tarjeta completa
A complete card with header, body, and footer sections.
Diseño de encabezado de tarjeta en tres partes
Card headers support a flexible three-part layout: Title (fixed), Description (flexible, truncates), and Actions (fixed). Elements are separated by automatic gaps.
Gestión de usuarios
Manage user accounts, permissions, and access controls for your organization
Full three-part layout: title stays fixed, description fills available space and truncates with ellipsis, action button stays fixed on the right.
Informes
Generate and download analytics reports for your dashboard metrics
Multiple buttons can be grouped with ButtonGroup. The group stays fixed and won't shrink.
Configuración
Configure application preferences and system settings
Title + description without actions. The description expands to fill the remaining space.
Notificaciones
Title + actions without description. The gap keeps them separated, and justify-content: space-between pushes actions to the right.
Truncamiento de descripción larga
When descriptions are too long, they automatically truncate with ellipsis (...) to maintain a single-line header.
Analítica
This is a very long description that explains the analytics dashboard features including real-time metrics, historical data analysis, custom reports, and export functionality for enterprise users
The description truncates with ellipsis when it exceeds the available space. Hover or resize to see the effect.
Inventario
Track stock levels, manage suppliers, process purchase orders, and monitor warehouse capacity across multiple locations
Even with multiple action buttons, the description gracefully truncates to prevent overflow.
Con Tooltip para la descripción completa
Add pa-tooltip pa-tooltip--multiline to the description paragraph to show the full text on hover.
Panel
View real-time metrics, KPIs, and performance indicators for your organization. Includes customizable widgets, drill-down reports, and automated alerts.
Hover over the truncated description to see the full text in a multiline tooltip.
Registro de auditoría
Complete history of system changes, user actions, and security events. Filter by date, user, action type, or resource. Export to CSV for compliance reporting.
The tooltip provides full context while keeping the header compact and consistent.
Modificador de ajuste
Use headerWrap when you need the description to wrap onto its own line (useful for mobile or when full description visibility is important).
Resumen del proyecto
This card uses the wrap modifier so the description appears on its own line below the title and actions. This is useful when the full description text needs to be visible.
With headerWrap, the description moves to a new line (via flex-basis: 100% and order: 1) and can display multiple lines.
Documentación
Complete API reference and integration guides for developers. Includes code samples, authentication flows, and best practices for building with our platform.
The wrap modifier is ideal for mobile layouts or when description content is essential to display in full.
Tarjetas de color
Tarjeta principal
Card with primary color theme.
Tarjeta de éxito
Card with success color theme.
Tarjeta de advertencia
Card with warning color theme.
Tarjeta de peligro
Card with danger color theme.
Tarjetas de color del tema
Cards can use theme color slots (color-1 through color-9) for custom color schemes defined by your theme.
Color 1
Theme color slot 1
Color 2
Theme color slot 2
Color 3
Theme color slot 3
Color 4
Theme color slot 4
Color 5
Theme color slot 5
Color 6
Theme color slot 6
Color 7
Theme color slot 7
Color 8
Theme color slot 8
Color 9
Theme color slot 9
Tarjeta fantasma
Invisible container with no background, border, or shadow. Useful as a layout wrapper that maintains card spacing without visual chrome.
Tarjeta fantasma
No background, no border, no shadow. Just layout structure.
Tarjeta normal
Standard card for comparison.
Ghost card with body only — no header or footer needed.
Encabezados subrayados
Add isHeaderUnderlined for an accent border under the heading. Combine with headerUnderlineColor
for semantic colors or headerUnderlineThemeColor for theme color slots.
Color de acento predeterminado
Uses the theme's accent color.
Éxito
Green underline for positive context.
Advertencia
Yellow underline for caution.
Peligro
Red underline for critical items.
Información
Blue underline for informational.
Color 1
Theme color slot 1.
Color 3
Theme color slot 3.
Fantasma + Subrayado
Works with ghost cards too.
Tarjetas de estadísticas
Estadísticas con tendencias
Stats can display change indicators showing positive, negative, or neutral trends. Note: Change indicators only display when NOT using the icon layout.
Tarjetas interactivas
Tarjeta plegable
This card can be collapsed and expanded. Click the minus/plus button in the header.
Content that can be hidden to save space when not needed.
Tarjeta con pestañas
Overview content goes here. This is the default active tab.
Funciones avanzadas de tarjetas
Resumen del panel de analítica
This card demonstrates icon in title with tool buttons. The title will truncate with ellipsis when it's too long.
This is a Very Long Card Title That Should Be Truncated With Ellipsis When It Exceeds Available Space
Notice how the title truncates with ellipsis (...) when there's not enough space due to the tool buttons.
Gestión de proyectos
Different combinations of icons and tool button styles work well together.
Revenue Metrics and KPI Tracking System
Even with fewer tools, the title still truncates appropriately to maintain layout.
Tarjetas de visualización de datos
Pedidos recientes
| ID de pedido | Cliente | Importe | Estado |
|---|---|---|---|
| #1234 | John Doe | $299.99 | Completed |
| #1235 | Jane Smith | $149.50 | Pending |
| #1236 | Bob Johnson | $89.99 | Processing |
Feed de actividad
Referencia de clases CSS
Card Base & Sections
pa-card- Base card containerpa-card__header- Card header with title/toolspa-card__body- Card body content areapa-card__body--no-padding- Remove body padding (for tables)pa-card__footer- Card footer with actions/meta
Header Elements
pa-card__header- Flexbox header with gap between childrenpa-card__header--wrap- Allow description to wrap to new lineh1-h6(direct child) - Title, fixed width, won't shrinkp(direct child) - Description, flexible, truncates with ellipsispa-card__title- Title container with icon supportpa-card__title-icon- Icon before titlepa-card__title-text- Title text (auto-truncates)pa-card__actions- Button/control container (right side, gap + align-center); emitted from the:toolsslotpa-btn-group- Button group in header, fixed width
Footer Elements
pa-card__actions- Action buttons containerpa-card__meta- Meta text (timestamps, etc.)
Color Variants
pa-card--primary- Primary color headerpa-card--success- Success color headerpa-card--warning- Warning color headerpa-card--danger- Danger color headerpa-card--color-1throughpa-card--color-9- Theme color slots with automatic contrast textpa-card--stat- Compact padding for stat cardspa-card--ghost- Invisible container (no background, border, or shadow)
Card Tabs
pa-card__tabs- Tab navigation containerpa-card__tabs--inline- Inline tabs in header (same height as regular header)pa-card__tab- Individual tab buttonpa-card__tab--active- Active tab statepa-card__tab-content- Tab content panelpa-card__tab-content--active- Active content panel
Section Helpers
pa-section- Page section with marginpa-section-title- Standalone section title with accent border
Live-data direction · live_state
live_state="up" / "down" tint the card background to reflect the latest tick direction. v2.7.0 migrated the internal SCSS from rgba(--pc-success-bg, X) to color-mix() over the 5-step sentiment scale — wrapper API unchanged. Direction-of-change indicators, distinct from status (--success / etc.).