Card

A versatile container component with consistent border, background, and shadow styling. Supports default and outline visual variants, optional hover effects, and click handling.

Import

import { Card } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Card>
  <p>Default card content</p>
</Card>

Outline variant

<Card variant="outline">
  <p>Card with emphasized border</p>
</Card>

Hoverable and clickable

<Card hoverable onClick={() => console.log('clicked')}>
  <p>Interactive card with hover shadow</p>
</Card>

Props

Prop	Type	Default	Description
`children`*	ReactNode	-	Card content.
`variant`	'default' \| 'outline'	`'default'`	Visual variant controlling border style.
`hoverable`	boolean	-	Whether the card shows an elevated shadow on hover.
`onClick`	() => void	-	Click handler, making the card interactive.
`className`	string	-	Additional CSS class for the card container.