Flexible content containers for organizing and displaying information.
Same Height Cards
Use sameHeight on Grid to make all cards in a row match the height of the tallest card.
Short Card
This card has minimal content.
Tall Card
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.
Medium Card
This card also stretches to match the tallest card in the row.
Basic Cards
Simple Card
This is a basic card with just a body. Perfect for simple content display.
Card with Header
This card includes a header section for titles and actions.
Card with Footer
This card includes a footer section for actions or meta information.
Complete Card
A complete card with header, body, and footer sections.
Card Header Three-Part Layout
Card headers support a flexible three-part layout: Title (fixed), Description (flexible, truncates), and Actions (fixed). Elements are separated by automatic gaps.
User Management
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.
Reports
Generate and download analytics reports for your dashboard metrics
Multiple buttons can be grouped with ButtonGroup. The group stays fixed and won't shrink.
Settings
Configure application preferences and system settings
Title + description without actions. The description expands to fill the remaining space.
Notifications
Title + actions without description. The gap keeps them separated, and justify-content: space-between pushes actions to the right.
Long Description Truncation
When descriptions are too long, they automatically truncate with ellipsis (...) to maintain a single-line header.
Analytics
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.
Inventory
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.
With Tooltip for Full Description
Add pa-tooltip pa-tooltip--multiline to the description paragraph to show the full text on hover.
Dashboard
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.
Audit Log
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.
Wrap Modifier
Use headerWrap when you need the description to wrap onto its own line (useful for mobile or when full description visibility is important).
Project Overview
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.
Documentation
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.
Colored Cards
Primary Card
Card with primary color theme.
Success Card
Card with success color theme.
Warning Card
Card with warning color theme.
Danger Card
Card with danger color theme.
Info Card
Card with info color theme.
Theme Color Cards
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
Bordered Cards
Cards can have visible borders using the pa-card--bordered class.
Bordered Card
Card with visible border styling.
Bordered Primary
Bordered card with color variant.
Bordered Success
Bordered card with success variant.
Bordered Danger
Bordered card with danger variant.
Ghost Card
Invisible container with no background, border, or shadow. Useful as a layout wrapper that maintains card spacing without visual chrome.
Ghost Card
No background, no border, no shadow. Just layout structure.
Normal Card
Standard card for comparison.
Ghost card with body only — no header or footer needed.
Underlined Headers
Add isHeaderUnderlined for an accent border under the heading. Combine with headerUnderlineColor
for semantic colors or headerUnderlineThemeColor for theme color slots.
Default Accent
Uses the theme's accent color.
Success
Green underline for positive context.
Warning
Yellow underline for caution.
Danger
Red underline for critical items.
Info
Blue underline for informational.
Color 1
Theme color slot 1.
Color 3
Theme color slot 3.
Ghost + Underlined
Works with ghost cards too.
Statistics Cards
Statistics with Trends
Stats can display change indicators showing positive, negative, or neutral trends. Note: Change indicators only display when NOT using the icon layout.
Interactive Cards
Collapsible Card
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.
Card with Tabs
Overview content goes here. This is the default active tab.
Advanced Card Features
Analytics Dashboard Overview
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.
Project Management
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.
Data Display Cards
Recent Orders
| Order ID | Customer | Amount | Status |
|---|---|---|---|
| #1234 | John Doe | $299.99 | Completed |
| #1235 | Jane Smith | $149.50 | Pending |
| #1236 | Bob Johnson | $89.99 | Processing |
Activity Feed
CSS Classes Reference
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__tools- Tool buttons container (right side)pa-card__actions- Actions container, fixed widthpa-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