Documentation

Card

A versatile card container for organizing content with header, body, and footer sections.

Installation

pnpm install @rouf-dev/pantheon-ui

Usage

import { Card, CardHeader, CardTitle, CardContent } from "@rouf-dev/pantheon-ui";

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        Card content goes here.
      </CardContent>
    </Card>
  );
}

Examples

Basic Card

Card Title

Card description

This is the card content.

Card with Footer

Subscribe

Get updates on new features

Enter your email to subscribe to our newsletter.

Card Props

Props

NameTypeDefaultDescription
classNamestring-Additional CSS classes
children*ReactNode-Card content