Balance Logo
Balance
Reckon Design System

Aspect Ratio

Layout primitive for maintaining a fluid-width aspect ratio
Install
pnpm add @reckon-web/aspect-ratio
Import usage
import {
AspectRatio
} from '@reckon-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.

Open 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.

Young Yoda with caption 'pre-tax. Old Yoda with caption 'post-tax'.
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo