layout contract
AspectRatio
Responsive box that maintains a fixed ratio.
Variants
- 16/9
- Video / hero
- 1/1
- Avatars, product tiles
- 4/3
- Older photo
- 3/2
- Photography
- custom
- Pass numeric ratio prop
Sizes
- auto
Example
<AspectRatio ratio={16 / 9}><img src={hero} className="object-cover" alt="Product hero" /></AspectRatio>Usage rule
Place media (img, video, iframe) inside; CSS handles ratio.
The full AspectRatio contract has 2 more rules, plus the do-not patterns. Get the full recipe.