Components
CrystalCard
A content card with header, body, and footer sections.
CrystalCard extends CrystalTile with structured content regions — header, body, and optional footer. It handles common card patterns like image headers, action footers, and hover states.
Import
import { CrystalCard } from '@artasce/crystal-ui';Usage
<CrystalCard
title="Getting Started"
description="Learn the basics of Crystal Design System"
href="/docs"
/>Props
CrystalCard Props
| Token | Variable | Value |
|---|---|---|
title | string | — |
description | string | — |
href | string | — |
icon | React.ReactNode | — |
image | string | — |
footer | React.ReactNode | — |
variant | 'surface' | 'elevated' | 'outline' | 'surface' |
className | string | — |
Click any row to copy the CSS variable.
Examples
With Icon
import { Gem } from 'lucide-react';
<CrystalCard
icon={<Gem />}
title="Themes"
description="8 gemstone themes with full color palettes"
/>Interactive Card
When href is provided, the card becomes a link with hover effects:
<CrystalCard
title="View Documentation"
description="Read the full Crystal docs"
href="/docs"
/>Theme Comparison
Theme Comparison
diamond
Primary
Accent
onyx
Primary
Accent
garnet
Primary
Accent