Aspect Ratio

Presents content within the desired proportion. It is possible to manually control the proportion through the value property but several common proportions are available in a more user-friendly way through the type property.

Using Aspect Ratio is extremely important to avoid Cumulative Layout Shift (opens in a new tab) (CLS) issues. The CLS is one of the main ranking factors for Core Web Vitals (opens in a new tab) and is caused by unexpected changes to the page layout. Using Aspect Ratio helps by reserving the necessary space for certain content as it loads, preventing the page layout from changing abruptly.

Installation

pnpm add @inpulse-ds/aspect-ratio

Usage

import { AspectRatio } from '@inpulse-ds/aspect-ratio';

return (
    <AspectRatio>
      <img src="blocks.jpg" alt="Blocks" />
    </AspectRatio>
  );

Examples

Square

This is the default ratio (1:1). It is not necessary to pass any value to obtain the result below, but we are implementing it just to demonstrate how you could manually change it with any custom value.

Circle

The type with value circle delivers the same proportion as above, however, a round mask is applied to the content.

Photo

The component assumes the aspect ratio of a photograph. By default, the type with value photo has the same ratio as a photograph in landscape mode (3:2).

The second option available is the portrait aspect ratio (2:3).

Video

The component assumes the aspect ratio of a video. By default, the type with value video has the same ratio as a horizontal video (16:9).

The second option available is the aspect ratio of a standing video (9:16). It can be activated through type with the values: stories, reels or tiktok.

There are two extra options for videos: tv (4:3) and cinema (21:9).

Audiovisual content

In addition to images, Aspect Ratio can also be used in other types of audiovisual content, such as videos from YouTube, Vimeo, etc. To do this, simply add the content within the Aspect Ratio, as in the example below.