Skip to Content
FrontendBundlesComponentsUI PrimitivesCard

Card

A set of composable card layout components. No data fetching or logic — purely layout and styling.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Card";

Sub-components

ComponentDescription
CardRoot container with border, shadow, and rounded corners
CardHeaderTop section — contains title and description
CardTitlePrimary heading inside header
CardDescriptionSecondary text below title
CardContentMain body area
CardFooterBottom section — typically contains actions

All components accept standard HTML <div> (or appropriate element) attributes including className.

Usage

import {
  Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter
} from "...";
import { Button } from "...";
 
<Card className="w-80">
  <CardHeader>
    <CardTitle>Invoice #1024</CardTitle>
    <CardDescription>Due on March 31, 2025</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-2xl font-bold">$1,250.00</p>
    <p className="text-sm text-muted-foreground">Acme Corporation</p>
  </CardContent>
  <CardFooter className="flex justify-end gap-2">
    <Button variant="outline">View</Button>
    <Button>Pay Now</Button>
  </CardFooter>
</Card>
Last updated on
BadgeTable