> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Card

> A flexible card component for displaying content in containers

export const CardFullWidthPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/CardFullWidth" frameBorder="0" width="100%" height="260"></iframe>;

export const CardDisabledPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/CardDisabled" frameBorder="0" width="100%" height="260"></iframe>;

export const CardBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/CardBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The Card component provides a container for displaying content with consistent styling, hover effects, and disabled states.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Card } from '@peppermint-design/devreadykit-custom';

    export default function CardBasic() {
      return (
        <Card>
          <h3>Card Title</h3>
          <p>Card content goes here</p>
        </Card>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <CardBasicPreview />
  </Tab>
</Tabs>

## Disabled State

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Card } from '@peppermint-design/devreadykit-custom';

    <Card disabled>
      <p>This card is disabled</p>
    </Card>
    ```
  </Tab>

  <Tab title="Preview">
    <CardDisabledPreview />
  </Tab>
</Tabs>

## Full Width

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Card } from '@peppermint-design/devreadykit-custom';

    <Card fullWidth>
      <p>Card without padding</p>
    </Card>
    ```
  </Tab>

  <Tab title="Preview">
    <CardFullWidthPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop      | Type              | Default | Description            |
  | :-------- | :---------------- | :------ | :--------------------- |
  | children  | `React.ReactNode` | -       | Card content           |
  | className | `string`          | `""`    | Additional CSS classes |
  | disabled  | `boolean`         | `false` | Disabled state         |
  | fullWidth | `boolean`         | `false` | Remove padding         |
</PropsTable>