react-beautiful-card v1.2.1

React Beautiful Card

A React component for creating visually appealing cards with an image, title, and description. Perfect for showcasing content, products, or any kind of information in an elegant and responsive card design.

Features

• Responsive and customizable card design.
• Supports dynamic images, titles, and descriptions.
• Simple and lightweight, built with React.
• Customizable via className and additional styles.

Installation

To install the package, run:

npm install react-beautiful-card

or

yarn add react-beautiful-card

Usage

Here’s an example of how to use the React Beautiful Card component:

import React from "react";
import { Card } from "react-beautiful-card";

const App = () => {
  return (
    <div>
      <Card
        title="Beautiful Sunset"
        description="Experience the serene beauty of a stunning sunset."
        imageUrl="https://via.placeholder.com/300"
      />
    </div>
  );
};

export default App;

Props

Styling

The card comes with default styles, but you can customize it using the className prop or by overriding the CSS classes.

Default CSS Classes:

• .card
• .card-image
• .card-content
• .card-title
• .card-description

Example Customization:

/* Override styles in your project */
.card {
  border: 2px solid #ff6600;
  border-radius: 12px;
}

.card-title {
  color: #ff6600;
}

Build and Development

To contribute or modify the package, clone the repository and install dependencies:

git clone https://github.com/Prakash202112345/react-beautiful-card
cd npm i react-beautiful-card
npm install

Run the development server:

npm start

Build the package:

npm run build

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub(hhttps://github.com/Prakash202112345/ npm i react-beautiful-card).

License

This package is licensed under the MIT License.

Author

Prakash Sharma
Feel free to reach out for suggestions, feedback, or support!