Card

Cards are flexible containers used to group related content and actions. They are commonly used for displaying articles, user profiles, product details, and summary information in a dashboard.

This Card component is built with React and styled using Tailwind CSS, offering a clean and modern design. It includes subcomponents for header, title, description, content, and footer sections to structure information effectively.

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 (which renders a div by default, but can be customized) for headings to seek user attention.
• Grouping: Cards naturally group related content. For complex cards, ensure the CardTitle properly describes the card's purpose.
• Keyboard Navigation: Ensure any interactive elements within the card (buttons, links in CardFooter or CardContent) are keyboard accessible.