Card - DevReady Kit

Overview

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

Basic Usage

Code
Preview

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

Code
Preview

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

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

Full Width

Code
Preview

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

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

Props