Card

<Card>TailwindCSS Modules

A highly composable surface container that groups related content and actions together.

InstallationColoxo CLI

npx coloxo add card --style coloxo-css

ES Module ImportPlayground / npm package

import { Card, CardHeader, CardContent, CardMedia, CardActions, CardActionArea } from '@coloxo/ui';

Design Tokens:

--cx-bg-primary: #FFFFFF--cx-border-secondary: #CBD5E1--cx-radius-xl: 12pxshadow: sm

1. Variant Matrix

Cards come in outline (default), elevated, flat, and many more surface styles.

Variant	Outline	Elevated	Flat
Variants	Outline Default bordered card. Content inside.	Elevated Card with soft elevation. Content inside.	Flat Solid background, no border. Content inside.

2. Interactive Props Configurator

Variant

Padding (Content)

Composition Style

Visual Render Canvas

Quick Title

Simple description for the basic API.

Content goes here.

tsx

1<Card2  title="Quick Title"3  description="Simple description for the basic API."4>5  Content goes here.6</Card>

3. Dark theme

Cards adapt border colors and shadows automatically.

Dark Mode Card

Outline variant.

Notice the subtle border and deep background.

4. Enterprise layout compositions

Cards can be nested and laid out in responsive grids.

+12.4%

1,248

Total Likes

-2.1%

Dislikes

Accessibility

CardActionArea

When using CardActionArea, the root element renders as a <button> (or <a> if href is passed). It automatically handles Space/Enter keys and shows focus outlines.

Image Alt Text

When using CardMedia as an <img>, always provide an `alt` prop. If using it as a background image div, provide a `title` or `aria-label`.

Props

Name	Type	Default	Description
variant	CardVariant	outline	Visual surface style. Import CARD_VARIANTS for the full catalog.
padding	"none" \| "sm" \| "md" \| "lg"	md	Body padding when using the simple title/footer API.
title	ReactNode	—	Simple API heading.
description	ReactNode	—	Simple API supporting text under title.
header	ReactNode	—	Custom header slot (replaces title/description).
footer	ReactNode	—	Footer slot for actions or meta.
children	ReactNode	—	Body content, or compound slots when not using simple API.
CardHeader.title	ReactNode	—	Header title.
CardHeader.subheader	ReactNode	—	Supporting text under title.
CardHeader.avatar	ReactNode	—	Leading avatar.
CardHeader.action	ReactNode	—	Trailing header action.
CardHeader.disableTypography	boolean	false	Skip default title/subheader wrappers.
CardContent.padding	"none" \| "sm" \| "md" \| "lg"	md	Content padding.
CardContent.component	ElementType	div	Polymorphic root element.
CardMedia.image	string	—	Background image URL (div surface) or img src.
CardMedia.src	string	—	Alias for image on media elements.
CardMedia.component	ElementType	div	div \| img \| video \| audio \| iframe \| picture.
CardMedia.height	number \| string	—	Media height (px when number).
CardMedia.alt	string	—	Accessible name for the media.
CardMedia.title	string	—	Title / fallback accessible name.
CardActions.disableSpacing	boolean	false	Remove default action spacing.
CardActionArea.onClick	() => void	—	Primary click handler.
CardActionArea.href	string	—	Renders as an anchor when set.
CardActionArea.active	boolean	—	Forces data-active styles.
CardActionArea.disabled	boolean	—	Disables interaction.
CardActionArea.component	ElementType	—	Polymorphic root (button/a/custom).
CARD_VARIANTS	catalog	—	Exported style metadata for docs and galleries.