# Next.js Reusable Card Component
This template provides a reusable Card component for Next.js applications. It includes responsive styling, props validation, and optional image support.
```tsx
import Image from 'next/image';
import { FC } from 'react';
import styles from './Card.module.css';
interface CardProps {
title: string;
description: string;
imageUrl?: string;
onClick?: () => void;
}
const Card: FC<CardProps> = ({ title, description, imageUrl, onClick }) => {
return (
<div className={styles.card} onClick={onClick}>
{imageUrl && (
<div className={styles.imageContainer}>
<Image
src={imageUrl}
alt={title}
layout="fill"
objectFit="cover"
/>
</div>
)}
<div className={styles.content}>
<h2 className={styles.title}>{title}</h2>
<p className={styles.description}>{description}</p>
</div>
</div>
);
};
export default Card;
```
## Usage
1. Create a `Card.module.css` file in the same directory for styling:
```css
.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: box-shadow 0.3s ease;
cursor: pointer;
}
.card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.imageContainer {
position: relative;
width: 100%;
height: 200px;
}
.content {
padding: 16px;
}
.title {
font-size: 1.25rem;
margin-bottom: 8px;
}
.description {
font-size: 1rem;
color: #666;
}
```
2. Import and use the Card component in your pages or other components:
```tsx
import Card from '../components/Card';
const HomePage = () => {
return (
<div>
<Card
title="Example Card"
description="This is a reusable card component."
imageUrl="/example-image.jpg"
onClick={() => console.log('Card clicked')}
/>
</div>
);
};
export default HomePage;
```
This Card component is designed to be flexible and reusable across your Next.js application. It accepts props for title, description, an optional image URL, and an optional onClick handler. The component uses CSS Modules for scoped styling and Next.js's Image component for optimized image loading.
PDFClean.ai
Mini tools
