Skip to content
IntelliHelper logo

Intelli UI

SurfacesLiquid Glass

Aspect Ratio

Container that locks media to a consistent ratio. Preview live, copy the source, or install with the CLI into your Next.js project.
More surfaces
npx @intellihelper/cli@latest add aspect-ratio

16:9 frame

16:9 media

About this component

Aspect Ratio is part of Surfaces. Container that locks media to a consistent ratio.

Install with npx @intellihelper/cli@latest add aspect-ratio. 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 Aspect Ratio

Use when

  • Use Aspect Ratio when container that locks media to a consistent ratio.
  • 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 →