Card
Card
Container component for grouping related content with optional header, body, and footer sections.
Import
import { CardComponent } from '@primitivekit/angular';Basic Usage
<pk-card>Content</pk-card>Props
No props available.
Customization
The Card component supports CSS variables for complete customization:
<pk-card [style]="{
'--card-bg-color': '#007bff',
'--card-text-color': '#ffffff'
}">Custom</pk-card>Design Tokens
The following design tokens are available for customization:
--card-bg-color--card-border-width--card-border-color--card-border-radius--card-padding--card-box-shadow--card-box-shadow-hover--card-transition-duration--elevated--outlined- … and 3 more
Accessibility
The Card component is fully accessible and follows WCAG 2.1 AA standards:
- ✅ Semantic HTML elements
- ✅ Keyboard accessible
- ✅ Focus visible indicator
- ✅ Proper ARIA attributes
- ✅ Screen reader compatible
- ✅ Touch target size (44x44px minimum)
- ✅ Color contrast compliance
Keyboard Navigation
| Key | Action |
|---|---|
Tab | Move focus to/from component |
Related Components
- Container - Layout component for constraining content width and centering content on the page.
- Grid - Layout component for creating responsive grid layouts with customizable columns and gaps.
- Stack - Layout component for arranging children in a vertical or horizontal stack with consistent spacing.
- Space - Layout component for adding consistent spacing between elements.
- Divider - Visual separator component for dividing content sections horizontally or vertically.
