PUCard Component
A flexible card component with hand-drawn style borders and smooth hover animations
Usage
Basic Usage
Simple Card
This is a simple card with basic content.
Card with Image
Card with Image
This card includes an image at the top.
Card with Actions
Card with Actions
This card includes action buttons.
Card Sizes
Small Card
Small size card.
Medium Card
Medium size card.
Large Card
Large size card.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| variant | simple | image | actions | No | simple | Card variant style |
| size | small | medium | large | No | medium | Card size |
| image | string | No | '' | Image URL for image variant |
| imageAlt | string | No | '' | Alt text for image |
| customClass | string | No | '' | Custom CSS classes |
Slots
| Slot | Props | Description |
|---|---|---|
| default | - | Main card content |
| actions | - | Action buttons area |
Features
- Hand-drawn style borders and organic visual effects
- Multiple variants: simple, image, actions
- Responsive design with different sizes
- Smooth hover animations and transitions
- Dark mode support
- Accessible structure and keyboard navigation
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API
- PUButton for action buttons