Card Showcase

1
2<Card
3  title="Default Card"
4  description="A classic card with a subtle shadow and border. Ideal for general use cases."
5  additionalContent={
6    <p>This card is perfect for displaying general content. The design includes a subtle shadow to give it a sense of depth.</p>
7  }
8/>
9

1
2<Card
3  variant="outlined"
4  title="Outlined Card"
5  description="An outlined card with a clean border, suitable for content that needs emphasis."
6  additionalContent={
7    <p>This card features a clean border with no background color, making it suitable for emphasizing content without a strong background.</p>
8  }
9/>
10

1
2<Card
3  variant="elevated"
4  title="Elevated Card"
5  description="A card with elevated shadow to create a strong visual impact. Great for featured content."
6  additionalContent={
7    <p>This card stands out with an elevated shadow effect, perfect for showcasing important or featured content.</p>
8  }
9/>
10

1
2<Card
3  variant="image"
4  image="https://via.placeholder.com/400x250"
5  title="Image Card"
6  description="A card that includes an image at the top, ideal for visual content."
7  additionalContent={
8    <p>This card is designed to highlight visual content with a prominent image at the top, suitable for product displays or visual showcases.</p>
9  }
10/>
11

1
2<Card
3  variant="hover"
4  title="Hover Card"
5  description="A card that scales up on hover, providing an interactive experience."
6  additionalContent={
7    <p>Ideal for user interactions, this card provides a visual cue with a scaling effect when hovered over.</p>
8  }
9/>
10

1
2<Card
3  variant="profile"
4  image="https://via.placeholder.com/150"
5  title="Profile Card"
6  description="A card designed for user profiles, including an avatar and profile details."
7  additionalContent={
8    <div className="mt-4">
9      <p className="text-gray-600">John Doe</p>
10      <p className="text-sm text-gray-500">Software Engineer</p>
11    </div>
12  }
13/>
14

1
2<Card
3  variant="info"
4  title="Info Card"
5  description="A card styled for informational content with a blue background and border."
6  additionalContent={
7    <p>This card is useful for displaying informational content with a distinct blue background, making it stand out as a source of important information.</p>
8  }
9/>
10

1
2<Card
3  variant="action"
4  title="Action Card"
5  description="A card with a green theme and a call-to-action button for user interaction."
6  button={<button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition">Take Action</button>}
7  additionalContent={
8    <p>This card encourages user action with a prominent button, making it ideal for calls-to-action.</p>
9  }
10/>
11

1
2<Card
3  variant="feature"
4  title="Feature Card"
5  description="A bright card designed to highlight features with a yellow background."
6  additionalContent={
7    <p>This card is ideal for highlighting features or unique selling points with its bright yellow background and engaging design.</p>
8  }
9/>
10

1
2<Card
3  variant="pricing"
4  title="Pricing Card"
5  description="A card showcasing pricing information with a gray background."
6  additionalContent={
7    <div className="text-center mt-4">
8      <p className="text-3xl font-bold">$29.99</p>
9      <p className="text-gray-600">Per Month</p>
10    </div>
11  }
12/>
13