Hudoro card

Hudoro card is a strict and customizable card component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/card

Instal package using yarn

  yarn add @hudoro/card

Instal package using npm

  npm i @hudoro/card

Usage/Examples (you can combine using icon package hudoro)

import React from "react";
import ReactDOM from "react-dom/client";
import {Card, CardBody, CardFooter, CardHeader} from "@hudoro/card";

const App = () => (
  <div>
    <h1>Testing Card Component</h1>
    <Card>
      <CardHeader>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit a
          ipsam repellat
        </p>
      </CardHeader>
      <CardBody>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam
          architecto harum nam officia facilis, iure adipisci odit quaerat
          asperiores exercitationem.
        </p>
      </CardBody>
      <CardFooter>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti
          earum, temporibus dignissimos molestiae ex facilis facere impedit
          nulla quasi aperiam accusamus
        </p>
      </CardFooter>
    </Card>
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/card

Props that you can pass to <Card {...props}> ( you can add any props anchor element)

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true | | disable | boolean | false |

Props that you can pass to <CardHeader {...props}> ( you can add any props anchor element)

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <CardBody {...props}> ( you can add any props anchor element)

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <CardFooter {...props}> ( you can add any props anchor element)

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |