Components / Card
Card
Container with header/body/footer slots, 3 visual variants (elevated, outlined, filled), clickable mode with liquid-fill hover animation and hover lift.
layout v0.1.0
Playground
Examples
Elevated (default)
<cg-card variant="elevated"><cg-text size="lg" weight="bold">Elevated Card</cg-text><cg-text color="muted">Has a shadow underneath.</cg-text></cg-card>Outlined
<cg-card variant="outlined"><cg-text size="lg" weight="bold">Outlined Card</cg-text><cg-text color="muted">Has a border instead of shadow.</cg-text></cg-card>Filled
<cg-card variant="filled"><cg-text size="lg" weight="bold">Filled Card</cg-text><cg-text color="muted">Subtle background fill, no border.</cg-text></cg-card>Clickable
<cg-card variant="outlined" clickable><cg-text size="lg" weight="bold">Clickable Card</cg-text><cg-text color="muted">Hover for liquid-fill animation and lift.</cg-text></cg-card>Import
import { CgCard } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-card';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "elevated" | "outlined" | "filled" | "elevated" | Card visual style — elevated has shadow, outlined has border, filled has subtle background |
padding | "none" | "sm" | "md" | "lg" | "md" | Body padding |
clickable | boolean | false | Enable hover lift, liquid-fill animation, and click event |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
cg-card-click | {} | Fired when a clickable card is clicked |