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.
primitives-aspectratio--defaultOpen all variants →
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.