Card

A customizable, pixel-art styled card component for containing content.

Basic Usage

import { Card } from 'pixel-retroui';

function App() {
  return (
    <Card className="p-4">
      <h2>Card Title</h2>
      <p>This is the card content.</p>
    </Card>
  );
}

Props

Prop	Type	Default	Description
bg	string	'#ffffff'	Background color of the card
textColor	string	'#000000'	Text color of the card content
borderColor	string	'#000000'	Border color of the card
shadowColor	string	'#000000'	Shadow color of the card
className	string	''	Additional CSS classes to apply to the card

Custom Card

Customize your card's appearance by selecting a preset theme or creating your own color scheme.

Theme:

Card Title

This is the card content.

<Card
  bg="#fefcd0"
  textColor="black"
  borderColor="black"
  shadowColor="#c381b5"
  className="p-4 text-center"
>
  <h2>Card Title</h2>
  <p>This is the card content.</p>
</Card>

Additional Examples

Card with Custom Content and Classes

<Card bg="darkgray" className="p-4 items-center flex flex-col">
        <h2 className="text-2xl font-bold mb-2">Card Title</h2>
        <p className="mb-4">This card has custom content and styling.</p>
        <Button bg="gray" onClick={() => console.log("Button clicked")}>Click me</Button>
      </Card>

Preview:

Card Title

This card has custom content and styling.