Laravel Aspect Ratio Component
Free · MITReserves the right height before the content arrives, so the page does not jump.
A Aspect Ratio built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are
contrast-tested against WCAG 2.1 AA/UI in CI, in both themes —
see what's covered.
Drop it in with a single Blade tag:
<x-aura::aspect-ratio>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::aspect-ratio ratio="16/9">
<iframe src="…" class="h-full w-full" title="Product tour"></iframe>
</x-aura::aspect-ratio>See the full API, props and live examples in the Aspect Ratio documentation.
Overview
An image or an embed that has no reserved space collapses to nothing and then shoves the page down when it loads. <x-aura::aspect-ratio> holds the shape from the first paint.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio |
string |
'16/9' |
Any CSS aspect-ratio value: 1/1, 4/3, 21/9, 3/2. |
See more examples and every variant in the Aspect Ratio documentation.