ComponentsCard
Card
A versatile card component with animation and hover effects
Card Title
This is a basic card with default settings.
Outlined Card
This card has an outline effect on hover.
Scalable Card
This card scales up on hover.
Custom Styled Card
This card has custom styles.
The Card component is a versatile card component that can be used to display content in a structured and visually appealing way. It comes with animation and hover effects that can be customized to fit your design needs.
Tip!
Use the hoverEffect prop to add interactive elements to your cards without additional styling.
Warning!
The Card component uses 'use client' directive, ensuring it's only rendered on the client-side. Be mindful of this when using it in your Next.js application.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes to be applied |
| children | ReactNode | - | The content to be displayed inside the card |
| hoverEffect | 'none' | 'shadow' | 'scale' | 'outline' | 'shadow' | The hover effect to apply to the card |
| animationDelay | number | 0 | Delay in seconds before the animation starts |
| animate | boolean | true | Whether to animate the card on mount |
| border | boolean | true | Whether to display a border around the card |
Info
The component also accepts any additional props that can be applied to a div element.
Usage Examples
Basic Card
Card Title
This is a basic card with default settings.
Card with Hover Outline Effect
Outlined Card
This card has an outline effect on hover.
Card with No Animation
Static Card
This card does not animate on mount.
Card with Custom Styling
Custom Styled Card
This card has custom background and text colors.
Tip!
Experiment with different combinations of props to create cards that fit your design needs.