Skip to main content

​
Overview

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

​
Basic Usage

import { Card } from '@peppermint-design/devreadykit-custom';

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

​
Disabled State

import { Card } from '@peppermint-design/devreadykit-custom';

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

​
Full Width

import { Card } from '@peppermint-design/devreadykit-custom';

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

​
Props