Cards
Where neomorphism, glass and neon most visibly combine. Content always sits above the visual effect.
Variants
Four card types for different content roles.
Standard
.cardNeomorphic lift with a soft border. The default surface container. Use for most content blocks.
Glass
.card-glassTranslucent background with backdrop blur and glassy border. Best for overlays and panels floating above other content.
Interactive
.card-interactiveLifts on hover with a peripheral neon glow. Presses to inset on active. Use for clickable items in a grid.
Try hovering and clicking ↑
Active Users — .card-stats
12.458
↑ 12.8% vs last period
Content patterns
Common content layouts inside cards.
Feature card
Icon + heading + supporting text. Use for feature showcases.
Downloads
84.2k
@vulppi/toolbelt
A collection of tools and utilities for the Vulppi ecosystem.
View on NPM →Flagship product
Vulfram Engine
Agnostic rendering engine built for performance and portability. Modern and multi-platform.
No items yet
Empty state inside a standard card.
Usage rules
Do
- Keep content hierarchy clear inside the card
- Use card-glass for overlays and floating panels
- Use card-interactive for navigable grid items
- Let the shadow define depth, not extra borders
Don't
- Don't nest card-glass inside card-glass
- Don't add glow to non-interactive cards
- Don't use card-interactive for non-clickable content
- Don't let visual effects override content legibility