@hudoro/card
v0.0.1-beta.7
Published
Card component for Hudoro UI
Downloads
1,211
Readme
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 |