# Card

<figure><img src="https://raw.githubusercontent.com/akkshayTandon/react-hartan/main/images/card.png" alt="" width="188"><figcaption><p>Preview</p></figcaption></figure>

### Usage

The card displays some information, and image is also available.

> ```bash
> npm i react-hartan
> ```

{% code overflow="wrap" %}

```jsx
import { Card } from "react-hartan"

function App() {

  return (
    <>
      <Card></Card>
    </>
  )
}

export default App
```

{% endcode %}

### Customization With Props

* `imgSrc`  -> Accepts an image link, a string, which is shown inside the card. &#x20;
* `imgState`  -> Accepts a boolean value, which is used to toggle the image state.
* `imgAlt` -> Accepts an image alt.&#x20;
* `contentHeading`  -> Accepts a string value, which is the card heading.
* `contentPara`  -> Accepts a string value, which is card paragraph text.
* `buttonText`  -> Accepts a string value, used as the button name.
* `onClickFunction` -> Accepts a function, written by the user, which handles the logic when the button is clicked.
* `id` -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.
* `imgLoad` -> The imgLoad prop is mapped to the loading attribute in HTML img tag. It allows to provide overall the value for loading attribute, "lazy" | "eager".
* `userButtonStyle`  -> The custom styling prop which accepts class name(s) for the button styling inside the Card component.
* `userCardStyle`  -> The custom styling prop which accepts class name(s) for the full Card component.
* `userContentStyle`  -> The custom styling prop which accepts class name(s) for the content inside the card component.

{% tabs %}
{% tab title="Default" %}

```jsx
import { Card } from "react-hartan"

function App() {

  return (
    <>
      <Card></Card>
    </>
  )
}

export default App
```

{% endtab %}

{% tab title="With Custom Props" %}

```jsx
// App.css
.my-class{
  background-color: red;
  font-size: 2rem;
}


// App.jsx
import { Card } from "react-hartan"

function App() {

  return (
    <>
      <Card imgState={false} userCardStyle={"my-class"}></Card>
    </>
  )
}

export default App
```

{% endtab %}
{% endtabs %}

### Component Code

This is the code for the Card component.

{% tabs %}
{% tab title="Card.jsx" %}
{% code overflow="wrap" %}

```jsx
import Button from "../Button/Button"
import cardStyle from "./Card.module.css"
import PropTypes from "prop-types"

const para = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia architecto minima reprehenderit? Iure eaque nostrum, blanditiis in quos, natus, ea nobis beatae distinctio dicta earum!"

export default function Card({ buttonText = "Card Button", onClickFunction, userButtonStyle, imgSrc = "https://dummyimage.com/720x400", imgState = true, imgAlt= "Hartan" , contentHeading = "Hartan", contentPara = para, id, imgLoad userCardStyle, userContentStyle }) {

    return (
        <section className={`${cardStyle.cardSection} ${userCardStyle}`}>
            {
                imgState &&
                <figure>
                    <img src={imgSrc} alt={imgAlt} loading={imgLoad}/>
                </figure>
            }

            <div className={`${cardStyle.content} ${userContentStyle}`}>
                <div>
                    <h1>{contentHeading}</h1>
                    <div>{contentPara}</div>
                </div>
                <Button userButtonStyle={userButtonStyle} buttonText={buttonText} onClickFunction={onClickFunction}/>
            </div>
        </section>
    )
}

Card.propTypes = {
    contentHeading: PropTypes.node,
    contentPara: PropTypes.node,
    buttonText: PropTypes.node,
    userButtonStyle: PropTypes.string,
    onClickFunction: PropTypes.func,
    imgSrc: PropTypes.string,
    imgState: PropTypes.bool,
    imgAlt: PropTypes.string,
    id: PropTypes.string,
    userCardStyle: PropTypes.string,
    userContentStyle: PropTypes.string,
};
```

{% endcode %}
{% endtab %}

{% tab title="Card.module.css" %}
{% code overflow="wrap" %}

```css
/* Card CSS Module */

/* Styling for full card */
.cardSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border: .15rem solid rgb(194, 191, 191);
    border-radius: .5rem;
    width: 29rem;
    gap: 1.5rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* Styling for full card when hovered */
.cardSection:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* Styling for the container containing image inside the card */
.cardSection figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styling for the image inside the card */
.cardSection figure img {
    height: 20rem;
}

/* Styling for content container inside the card */
.content {
    padding: .5rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 2rem;
}

/* Styling for the heading inside the content container */
.content h1 {
    font-size: 3rem;
}

/* Styling for the paragraph text inside the content container */
.content div {
    font-size: 1.35rem;
}
```

{% endcode %}
{% endtab %}
{% endtabs %}