Card

Stable

This component has limited functionality on the server side. In Next.js, add "use client" at the top to make it work.

A practical container component for grouping related content with different styling options.

Import

TypeScript React

import { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter } from "laxod";

The simplest card with just content inside.

This is a basic card with a title and description.

Card content goes here. You can put any content inside the card body.

Cards come in different visual styles to fit your needs.

Default

Standard card

Fancy

Card with moving border glow effect

Outlined

Card with border

Flat

Minimal card with no border

Control the amount of internal spacing with the padding prop.

No padding

Small padding

Medium padding (default)

Large padding

Cards can be made clickable by passing an onClick handler.
Setting the interactive prop adds the pointer cursor.

This card is interactive and responds to clicks.

Times clicked: 0

Use CardFooter to add action buttons or additional information.

Add more information to enhance your account.

Your profile is 60% complete. Add a profile picture and bio to finish.

Prop	Type	Default	Description
children	ReactNode	-	Content to display in the card
variant	"default" \| "fancy" \| "outlined" \| "flat"	"default"	Visual style of the card
padding	"none" \| "sm" \| "md" \| "lg"	"md"	Internal spacing of the card
interactive	boolean	false	Enable hover effects and cursor pointer
onClick	(e: MouseEvent) => void	-	Click handler (automatically makes card interactive)
className	string	""	Additional CSS classes to apply

Card comes with several subcomponents for structured layouts.

Component	Description
CardHeader	Container for card title and description
CardTitle	Main heading for the card
CardDescription	Subtitle or supporting text
CardBody	Main content area of the card
CardFooter	Footer section for actions or metadata