Aspect Ratio

Class	Properties
ar-auto	aspect-ratio: auto;
ar-l	aspect-ratio: 16/9;
ar-s	aspect-ratio: 1/1;

Auto

This example sets the aspect ratio to auto. The ar-auto class allows the element to maintain its default aspect ratio based on its content.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Landscape

This example sets the aspect ratio to 16/9. The ar-l class enforces a widescreen aspect ratio.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Square

This example sets the aspect ratio to 1/1. The ar-s class enforces a square aspect ratio.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

You can combine responsive breakpoints like sm:ar-*,md:ar-*, lg:ar-*, and xxl:ar-* allows targeting specific utilities in different viewports.

<div class="ar-s md:ar-l ..."></div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

Alternatively, you can apply :hover by using h:ar-* utility to override elements and change their values when hovering over them.

<div class="ar-s h:ar-l ..."></div>