Card
A flexible card container with variants, hover animations, and accent stripe support.
Import
import { Card } from '@synapse-ui/card';
Basic Usage
<synapse-card>
<h3 card-header>Card Title</h3>
<p>Card body content goes here.</p>
</synapse-card>
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'elevated' | 'outlined' | 'ghost' | 'default' | Visual style of the card |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Internal padding |
hoverable | boolean | false | Adds lift + shadow animation on hover |
accent | boolean | false | Shows a coloured left-edge accent stripe |
Content Projection
| Slot | Description |
|---|---|
[card-header] | Projected into the header region |
[card-footer] | Projected into the footer region |
| (default) | Card body |