Balance Logo
Balance
Reckon Design System
Open playroom

Aspect Ratio

Layout primitive for maintaining a fluid-width aspect ratio
Install
pnpm add @balance-web/aspect-ratio
Import usage
import {
AspectRatio
} from '@balance-web/aspect-ratio';
  • Code
  • API

The AspectRatio primitive is used to embed responsive media like images and videos.

Usage

Ratio

The aspect ratio of the box. Common values are: 1, 16/9, 4/3.

Edit in Playroom

Video

Here's how to embed a video that has a 16 by 9 aspect ratio.

Image

Here's how to embed an image that has a 1 by 1 aspect ratio.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo