Works everywhere

Card works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/card) — the library detects the runtime automatically.

Card

Card is a multipurpose container that groups related content. It supports multiple visual colors (panel, list-item), optional shadow, animated entrance, and a clickable mode via redirect or onClick.

Live demo →

---

Overview

import { Card } from "@prokodo/ui/card"
;<Card color="panel" enableShadow animated={false}>
  <h2>Title</h2>
  <p>Card content goes here.</p>
</Card>

Live PreviewOpen in Storybook ↗

---

Import

import { Card } from "@prokodo/ui/card"

CSS:

import "@prokodo/ui/card.css"

---

Props

Prop	Type	Default	Required	Description
children	ReactNode	—	—	Card content.
color	Variants	—	—	Accent color (border / shadow tint).
highlight	boolean	false	—	Apply highlight visual treatment.
gradiant	boolean	false	—	Apply gradient overlay.
gradiantClassName	string	—	—	CSS class on gradient overlay element.
contentClassName	string	—	—	CSS class on inner content wrapper.
background	boolean	false	—	Render background element.
backgroundProps	object	—	—	Props forwarded to the background element.
loading	boolean	false	—	Show skeleton loading state.
skeletonProps	SkeletonProps	—	—	Props for the skeleton placeholder.
disabled	boolean	false	—	Apply disabled visual state.
animatedProps	AnimatedProps	—	—	Entrance animation config.
customAnimation	string	—	—	Custom animation class override.
onClick	() => void	—	—	Card click handler.
onKeyDown	React.KeyboardEventHandler	—	—	Keyboard event handler.
onMouseEnter	() => void	—	—	Mouse enter handler.
onMouseLeave	() => void	—	—	Mouse leave handler.
className	string	—	—	CSS class on root element.

See src/components/card/Card.model.ts for the full CardProps type.

---

Design Tokens

Customise Card via CSS custom properties on :root or a scoped ancestor.

Token	Default	Description
--pk-card-bg	var(--pk-color-surface)	Card background colour
--pk-card-panel-light-border	rgba(0, 0, 0, 0.08)	Light panel border (for light-mode panels on light backgrounds)

AIC Note

Use the standard import path in application code:

import { Card } from "@prokodo/ui/card"

No separate /client or /lazy import selection is required in consumer code.

AIC components also support a priority flag for critical above-the-fold elements. This is most visible on Image (native preloading via <link rel="preload"> for above-the-fold content).

---

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
2.1.1	Keyboard (A)	✅ Fulfilled	All functionality must be operable via keyboard alone, without requiring specific timing.
2.4.3	Focus Order (A)	🔍 Manual review	The keyboard focus sequence must preserve meaning and operability in the complete page integration context.
2.4.7	Focus Visible (AA)	🔍 Manual review	A visible keyboard focus indicator must be present on every interactive element. Verify against the applied product theme.
2.4.11	Focus Not Obscured (Min.) (AA)	🔍 Manual review	The focused component must not be fully hidden by sticky headers, overlays, or other positioned page elements.
2.5.8	Target Size (Minimum) (AA)	🔍 Manual review	Interactive target areas must be at least 24 × 24 CSS pixels. Verify in the integrated product UI.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 2 jest-axe assertion(s) across 4 test file(s) · 1 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Card in Storybook

---

Source

src/components/card/Card.model.ts