Card Component

The Card 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 Card component, use npm:

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

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-card";

const App = () => {
  return (
    <div>
      <Card
        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:

| Prop | Type | Default | Description | | ----------- | ------------------- | ------- | ------------------------------------------------------------- | | title | string | - | The title of the card | | subtitle | string | - | The subtitle of the card | | icon | 'React.ReactNode' | - | An optional icon to display at the top of the card | | Image | string | - | An optional URL of an image to display at the top of the card | | content | React.ReactNode | - | The main content of the card | | actions2 | React.ReactNode | - | Optional actions to display at the bottom of the card | | tag | React.ReactNode | - | An optional tag to display at the top right of the card |

Conclusion

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