Card

The React Card component is a container for grouping related content and actions. It helps you organize information in a clear and structured way.

You can use it to display content such as articles, user profiles, product details, or dashboard summaries. For example, a card can show a title, description, and buttons in one place.

Built with React and styled with Tailwind CSS, it includes sections like header, content, and footer to help you easily structure your layout.

Installation

npx @tailgrids/cli add card

Anatomy

Import the components and arrange them to build a card.

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle
} from "@/registry/core/card";

export function CardDemo() {
  return (
    <Card className="w-87.5">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <form>{/* Your form or content here */}</form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <button>Cancel</button>
        <button>Deploy</button>
      </CardFooter>
    </Card>
  );
}

Examples

Mobile Responsiveness

The card component is designed to be responsive in any devices.

Horizontal Card

Display card content in a horizontal layout, useful for list items or featured content.

PreviewCode

Light Theme

Copy to clipboard

Barry Geraghty’s blog Vango runs unchained up in trip.

William Hill ambassador Barry Geraghty previews Saturday’s races at Uttoxeter, Kempton, and Thurles.

Learn More

Barry Geraghty’s blog Vango runs unchained up in trip.

William Hill ambassador Barry Geraghty previews Saturday’s races at Uttoxeter, Kempton, and Thurles.

Learn More

Article Card

A card layout optimized for blog posts or news articles, featuring an image, title, excerpt, and metadata.

PreviewCode

Light Theme

Copy to clipboard

Ahmed Tusar

Tech Enthusiast

The Sun Also Rises by Ernest Hemingway

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the

List Style

Use cards to create list-style interfaces, perfect for settings pages or item listings.

With Avatar

Combine cards with avatars to display user profiles or team members.

PreviewCode

Light Theme

Copy to clipboard

Mosharof Chowdhury

Enterpreneur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the

With Image

Use images as the primary visual element in your cards.

PreviewCode

Light Theme

Copy to clipboard

Design

Everything you need to know About UI/UX Design.

With Badge

Add badges to cards to highlight status, tags, or categories.

PreviewCode

Light Theme

Copy to clipboard

17Mar

Cartoon

Behind the Scenes of Popular Cartoons

API Reference

The Card component and its subcomponents are built on top of the standard HTML div element and accept all standard props.

Card

Displays a card with header, content, and footer.

CardHeader

The header of the card.

CardTitle

The title of the card.

CardDescription

The description of the card.

CardAction

The action area of the card, usually for buttons or links in the header.

CardContent

The main content of the card.

CardFooter

The footer of the card.

NOTE: The CardTitle, CardDescription, and CardAction components are designed to be used within the CardHeader component.

Accessibility

• Semantic structure: Use CardTitle for headings and structure content clearly so users can understand what the card represents.
• Content grouping: The card groups related content and actions together, making it easier to scan and understand.
• Keyboard support: Ensure any interactive elements inside the card (such as buttons or links in CardFooter or CardContent) are accessible using the keyboard.
• Screen reader support: Provide clear text for titles, descriptions, and actions so screen readers can describe the card content properly.