Skip to content
IntelliHelper logo

Intelli UI

Glass SystemLiquid Glass

Glass Content Card

Expressive saturated panels beneath floating chrome controls. Preview live, copy the source, or install with the CLI into your Next.js project.
More glass system
npx @intellihelper/cli@latest add glass-content-card

Music player layout

Content panels with floating glass bar controls.

About this component

Glass Content Card is part of Glass System. Expressive saturated panels beneath floating chrome controls.

Install with npx @intellihelper/cli@latest add glass-content-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 Glass Content Card

Use when

  • Use Glass Content Card when expressive saturated panels beneath floating chrome controls.
  • You need frosted chrome (bars, icon buttons, content cards) that sit above expressive product surfaces.
  • You want Liquid Glass hierarchy instead of applying blur to every panel.

Avoid when

  • You only need a single neutral Button with no glass system — start with actions instead.
  • You are shipping a purely text document without chrome chrome layers.

Accessibility notes

  • Keep interactive chrome contrast above WCAG AA against the active mesh or image background.
  • Do not rely on blur alone to communicate state; pair with borders, weight, and focus rings.
  • Icon-only glass controls need accessible names (aria-label or visible text).

Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.

Composition tips

  • Place chrome components (glass-bar, glass-icon-button) above content panels — not nested inside saturated content cards.
  • Pair with theme tokens from Intelli UI so blur, border, and fill stay consistent across pages.

FAQ

Related components

View all glass system →