Components
CrystalGlassCard
Frosted glass card with backdrop blur and optional glow effects.
CrystalGlassCard creates a translucent card with backdrop-filter blur. Unlike CrystalCard which uses solid backgrounds, this component layers a semi-transparent surface over content behind it, creating a glassmorphism effect.
Import
import { CrystalGlassCard } from '@artasce/crystal-ui';Usage
<CrystalGlassCard>
<h3>AI Code Generator</h3>
<p>Custom AI-powered platform replacing legacy software.</p>
</CrystalGlassCard>Props
CrystalGlassCard Props
| Token | Variable | Value |
|---|---|---|
children | React.ReactNode | — |
padding | 'none' | 'sm' | 'md' | 'lg' | 'lg' |
hoverable | boolean | false |
glowOnHover | boolean | false |
onClick | () => void | — |
className | string | — |
Values update live with theme changes. Click any row to copy the CSS variable.
CrystalGlassCard vs CrystalCard
| Feature | CrystalGlassCard | CrystalCard |
|---|---|---|
| Background | Translucent (accent-subtle) | Solid (theme surface) |
| Backdrop blur | Yes (8px) | No |
| Hover lift | Optional (hoverable) | Built-in on link cards |
| Glow shadow | Optional (glowOnHover) | No |
| Structure | Unstructured children | title / description / footer |
Examples
Hoverable with Glow
The most common pattern — a card that lifts on hover with a violet glow:
<CrystalGlassCard hoverable glowOnHover>
<span className="text-xs uppercase tracking-widest opacity-50">Case Study</span>
<h3 className="text-2xl font-bold mt-2">Healthcare Cloud</h3>
<CrystalGradientText as="span" className="text-4xl font-bold">99.99%</CrystalGradientText>
<p className="opacity-60 mt-2">Uptime SLA achieved</p>
</CrystalGlassCard>Clickable Card
<CrystalGlassCard onClick={() => router.push('/case-study/halliburton')}>
Click to view case study
</CrystalGlassCard>Token Usage
| Property | Token |
|---|---|
| Background | --crystal-color-crystal-accent-subtle |
| Border | --crystal-color-crystal-border-default |
| Border (hover) | --crystal-color-crystal-border-strong |
| Border radius | --crystal-radius-xl (16px) |
| Shadow (glow) | --crystal-crystallization-shadow |
| Text color | --crystal-color-crystal-foreground-primary |
Theme Comparison
Theme Comparison
diamond
Primary
Accent
onyx
Primary
Accent
garnet
Primary
Accent