CatalystCardv0.3.3Ready for Production
A flexible container component that groups related content and actions with customizable borders and styling.
Prefer AI-assisted development?
Catalyst Card is a flexible container built on Radix's Slot primitive with built-in design tokens and CVA variants — giving you a production-ready surface for grouping related content and actions with zero configuration.
Installation
npm install @pmi/catalyst-cardimport { Card } from '@pmi/catalyst-card';Variants
Outline
The outline variant displays a visible border. Use it when you want to create a distinct separation between the card and its background.
Ghost
The default variant. Use ghost for a minimal surface without borders, relying on background color and shadows for separation.
Common Patterns
Slot (asChild)
You can pass the asChild prop as true so the Card component merges its own props onto its immediate child. It uses Radix Slot to implement the asChild pattern.
List Item Card
Cards work well for clickable list items with badges and icons.
Title Item
Price Tag Cards
Display pricing information with semantic color variants.
Member Price
$0.00
Full Price
$0.00
Member Price
$0.00
Full Price
$0.00
Member Price
$0.00
Full Price
$0.00
Member Price
$0.00
Full Price
$0.00
Member Price
$0.00
Full Price
$0.00
Member Price
$0.00
Full Price
$0.00
Member Price
$0.00
Full Price
$0.00
Member Price
$0.00
Full Price
$0.00
Certification
Specific cards that should only be used for our flagship certifications.
CAPM®
Certified Associate in Project Management®
No experience required
This certification demonstrates an understanding of the foundational skills that project teams demand.
PMP®
Project Management Professional®
3-5 years of experience
The PMP® validates competence in managing people, processes, and priorities on projects from start to finish.
PgMP®
Program Management Professional®
4-7 years of experience
Show that you have real-world experience managing multiple complex projects as part of a coordinated program.
PfMP®
Portfolio Management Professional®
8+ years of experience
Verify advanced competency as a portfolio manager to drive the right work and deliver the most value.
ACRONYM®
Specialized Certification Title Goes Here®
No experience required
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
API Reference
Card
Accepts all standard HTML div attributes (className, style, aria-*, etc.).
Does not forward a ref to the underlying element (use asChild for ref forwarding via Radix Slot).
Prop
Type
Accessibility
Keyboard Interactions
Card has no built-in keyboard interactions. When asChild is used to render an interactive element (e.g. <button> or <a>), that element's native keyboard behaviour applies.
ARIA
- Card renders as a plain
<div>by default — it carries no implicit ARIA role. - Use
role="region"with anaria-labeloraria-labelledbywhen the card represents a distinct, labelled section of the page that users should be able to navigate to directly. - When using
asChildto render a<button>or<a>, the child element's implicit role is preserved by Radix Slot. - Decorative background images inside a card should use
alt=""androle="presentation"to be hidden from assistive technology.
Choosing the Right Component
Use Card when you need a generic surface to group related content. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| A dismissible message or status notification | Alert |
| A modal overlay that interrupts the user for a required decision | Dialog |
| A persistent, contextual hint attached to a specific UI element | Callout |
| A navigable panel that slides in from the edge of the screen | Sheet |