Command Palette

Search for a command to run...

Components / Display

Card

அட்டை

Cards group related information and actions into a contained surface. They are the primary layout primitive for content in Tamil DS.

அட்டைகள் தொடர்புடைய தகவல்களை ஒரு மேற்பரப்பில் தொகுக்கின்றன.

Basic card

Component preview
Profile cardசுயவிவர அட்டை

Anatomy

Structure

Anatomy

5 parts documented for implementation and review.

Component map
1

Card container

கார்டு கொள்கலன்required<div>

Root wrapper applying the surface treatment: rounded-md border, bg-card background, and shadow-xs. Uses overflow-hidden to clip child content. Supports data-size='sm' for compact cards with reduced padding and gap.

2

CardHeader

தலைப்பு<div>

Top section containing the title, description, and optional action elements. Applies px-6 padding. In Tamil-first UIs, the Tamil title should appear first with the English subtitle in muted text below.

3

CardTitle

தலைப்பு வாசகம்<h3>

Primary heading text at font-semibold text-lg. Connected to the card via semantic heading hierarchy. Should be descriptive and scannable.

4

CardContent

உள்ளடக்கம்required<div>

Main body area with px-6 padding. Accepts any children — forms, tables, text, images, lists. When card has no header, content handles all visual structure.

5

CardFooter

அடிக்குறிப்பு<div>

Bottom action bar with flex layout and px-6 padding. Typically contains action buttons (Submit, Cancel), links, or metadata. Primary action on the right.

Usage guidance

  • Cards should be self-contained — everything a user needs to act should be in or near the card.
  • Tamil card titles render correctly with font-tamil on CardTitle.
  • Hover state: hover:shadow-sm hover:-translate-y-0.5 for interactive cards.
  • Never nest cards inside cards — use a different surface pattern.
API

Props

1 prop
className
Type
string
Default
-
Description
Border, shading, and background utility custom overrides.

Best practices

Add hover feedback for interactive cards
தொடர்பு அட்டைகளில் hover பதில் சேர்க்கவும்

Apply hover:shadow-sm and hover:-translate-y-0.5 so users get tactile feedback that the card is clickable.

அட்டை கிளிக் செய்யக்கூடியது என்று பயனர் புரிய hover:shadow-sm பயன்படுத்தவும்.

Don't nest cards inside cards
அட்டைக்குள் அட்டை வைக்காதே

Nested cards create visual confusion and unclear hierarchy — use a list, table, or different surface instead.

அட்டைக்குள் அட்டை வைப்பது காட்சி குழப்பத்தை உருவாக்கும் — வேறு வடிவமைப்பு பயன்படுத்தவும்.

Put the primary action in CardFooter on the right
முதன்மை செயலை CardFooter-ல் வலதுபுறம் வைக்கவும்

Placing the primary action in the footer, right-aligned, follows convention and makes it easy to find.

முதன்மை பொத்தானை அடிப்பகுதியில் வலதுபுறம் வைப்பது நடைமுறையை பின்பற்றி பயனருக்கு எளிதாக்கும்.

Don't overload a card with too many actions
அட்டையில் அதிக செயல்பொத்தான்களை ஏற்றாதே

More than 2–3 actions on a card overwhelm the user — promote one primary action and hide the rest.

2–3-க்கும் அதிக செயல்கள் பயனரை குழப்பும் — ஒரு முதன்மை செயல் மட்டும் காட்டவும்.