SurfacesLiquid Glass
Card
Frosted glass panels for chrome and expressive content. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add cardChrome & content cards
About this component
Card is part of Surfaces. Frosted glass panels for chrome and expressive content.
Install with npx @intellihelper/cli@latest add card. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Card
Use when
- Use Card when frosted glass panels for chrome and expressive content.
- Grouping related content into cards, tabs, or layout shells.
- Elevating a section without full-page chrome.
Avoid when
- Long-form docs where plain typography is clearer than nested cards.
- Modals — use overlays instead of stacking cards.
Accessibility notes
- Headings inside cards should follow document order for screen readers.
- Tab panels need keyboard arrow support (built into Radix-based tabs).
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Prefer one chrome surface level deep; avoid card-in-card glass stacks.
- Use separators sparingly between sections inside a surface.
- Prefer layout primitives (Stack, Cluster, Grid, Split) over nested divs for spacing and alignment.
- Use as="section" | as="ul" | asChild so landmarks stay semantic — layout is not always a div.
FAQ
Related components
View all surfaces →Tabs
Glass capsule tabs with sliding chrome indicator.
Open →Separator
Chrome dividers for horizontal and vertical layout.
Open →Layout
Stack, Cluster, Grid, Flex, Center, Split, Container, Box, and Spacer — replace nested layout divs with named primitives.
Open →Resizable
Drag-to-resize panel groups with glass grip handle.
Open →