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.

layoutv0.1.0

Playground

Examples

Elevated (default)

Elevated Card

Has a shadow underneath.

<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

Outlined Card

Has a border instead of shadow.

<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

Filled Card

Subtle background fill, no border.

<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

Clickable Card

Hover for liquid-fill animation and lift.

<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