Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/ui-resolver.
• Live playground: /components/base-ui/card.

When to use it

Use Card when a group of related information needs a clear surface boundary and a predictable slot model. It works especially well for summary modules where title, support text, actions, and detail rows should stay aligned across many screens.

Slot strategy

Card is most useful when each slot has a clear job:

• CardHeader for title, description, and optional top-level action
• CardContent for the main details, metrics, or rich body content
• CardFooter for the final CTA or supporting controls

Keep actions intentional

If the action changes the whole card context, put it in CardFooter. If it is a small management affordance like "Edit" or "View details", CardAction in the header usually scans better.

Layout guidance

Cards work best when the spacing between sections stays consistent. Resist the urge to restyle each card from scratch with heavy one-off utility classes. Instead, keep the recipe intact and let content density or slot presence create the variation.

For grids, use one consistent width and let copy wrap naturally. For detail views, cards can be wider, but the same slot order still helps maintain rhythm across the page.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/ui-resolver.
• Playground route: /sandbox?component=Card.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes