AspectRatio
Carbon's AspectRatio. A token-free, dependency-free wrapper that locks children to a fixed width-to-height ratio via the modern CSS `aspect-ratio` property.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { AspectRatio } from "@avala/design"; <AspectRatio>AspectRatio</AspectRatio>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-aspectratio--defaultOpen in Storybook →
When to use
- Hero imagery, video embeds, thumbnails — anything that should stay 16:9 / 4:3 / 1:1 regardless of container width.
- Card cover art that needs consistent slot dimensions across a grid.
- Marketing illustrations whose layout depends on a fixed ratio.
When not to use
- Content that should grow with its children → use a plain
<div>. AspectRatio is for *fixing* the slot, not *responding* to content. - Aspect-ratio behaviour you'd rather express via Tailwind's
aspect-square/aspect-videoutilities directly inside one element. AspectRatio is the wrapper-style API; both are valid.