CleenUI · Data Display · Card

Card

The base card primitive — padding, border, shadow, and a slot for any content.

storybook.cleenui.com · data-display-card--default
Open in new window

About Card

Card is the foundational content container. Three size variants and an optional hover-lift effect handle most common card-style layouts. Header and footer slots structure content into a predictable visual rhythm.

Use Card directly when none of the specialized variants (CardIcon, CardMedia, EditableCard) fit. The other card variants extend this base with additional slots and behavior.

When to use it

  • Generic content containers in dashboards.
  • List item wrappers with consistent padding.
  • Settings and preferences panels.
  • Empty-state messages with action buttons.

Common props

Prop
Type
Description
padding
"sm" | "md" | "lg" | string
Internal padding.
hoverable
boolean
Add lift-on-hover effect.
header
ReactNode
Header slot content.
footer
ReactNode
Footer slot content.
as
ElementType
Render-as element (e.g. "a" for clickable cards).
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.