react-ts-droid-card v0.0.6

Card Component

The DriodCard component is a flexible and customizable UI component for displaying content in a card format. It supports various elements such as a title, subtitle, icon, image, content, actions, and tags, making it suitable for a wide range of use cases.

Installation

To install the DriodCard component, use npm:

 npm install @droid-tech/react-ts-driodcard

Usage

Importing the Component First, import the Card component and the associated CSS file into your project:

Basic Usage

import React from "react";
import Card from "@droid-tech/react-ts-driodcard";

const App = () => {
  return (
    <div>
      <Card
        image="/Image/path"
        title="Card Title"
        subtitle="Card Subtitle"
        content="This is some example content for the card. It will be truncated if it's too long."
      />
    </div>
  );
};
export default App;

Usage with All Props

import React from "react";
import Card from "@droid-tech/react-ts-card";
import { FaStar } from "react-icons/fa";

const App = () => {
  return (
    <div>
      <Card
        title="Card Title"
        subtitle="Card Subtitle"
        icon={<FaStar />}
        image="https://via.placeholder.com/150"
        content="This is some detailed content for the card. It will be truncated if it's too long."
        actions={<card>Primary Action</card>}
        actions2={<card>Secondary Action</card>}
        tag={<span>New</span>}
      />
    </div>
  );
};
export default App;

Props

The Card component accepts the following props:

Conclusion

You can customize the styles of the Card component by modifying the Card.css file.