Card

@/components/kamod-ui/card

Enter your email below to login to your account

Installation

Import Card and subcomponents from `@/components/kamod-ui/card`.

pnpm add @kamod-ch/ui

Card Title

Card Description

Card Content

Card Footer

Usage

Compose `CardHeader` (title, description, optional `CardAction`), `CardContent`, and `CardFooter`. Set `size="sm"` on `Card` for tighter padding. For cover images, use `class="pt-0"` on the card and place the image as the first block; pair with `DirectionProvider` for RTL layouts.

import { Card } from "@/components/kamod-ui/card";

<Card />

Demo

Size

Use `size="sm"` for reduced vertical padding and smaller type scale on the card.

Small Card

This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

Image

Hero image with overlay, badge action in the header, and a full-width primary button (shadcn CardImage).

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

API Reference

Props, slots and variants for this component.

Card

Card component props and accepted values.

Prop	Type	Default
Card `size`	`"default"` \| `"sm"`	`"default"`
Card `class`	`string`	`undefined`
CardHeader `class`	`string`	`undefined`
CardTitle `class`	`string`	`undefined`
CardDescription `class`	`string`	`undefined`
CardAction `class`	`string`	`undefined`
CardContent `class`	`string`	`undefined`
CardFooter `class`	`string`	`undefined`

Accessibility Notes

Keep headings concise; ensure `CardAction` controls have visible labels. When using image cards, provide meaningful `alt` text. For RTL, set `dir` on the card and wrap with `DirectionProvider` so spacing utilities resolve correctly.