Flexible content containers for organizing and displaying information.
Same Height Cards
Use .pa-row--same-height 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 .pa-row--same-height modifier.
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.
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.
Theme Color Cards
Cards using theme-specific color slots (pa-card--color-1 through pa-card--color-9). Text color automatically adjusts for readability based on background brightness.
Color 1 Card
Uses --pa-color-1 with automatic contrast text color.
Color 2 Card
Uses --pa-color-2 with automatic contrast text color.
Color 3 Card
Uses --pa-color-3 with automatic contrast text color.
Statistics Cards
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.
Detailed information is displayed in this tab.
Settings and configuration options would be shown here.
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__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)
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 cards
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