# Aspect ratio: Overlay

> Absolutely positioned children sit on top of the media. The box clips nothing, so focus rings on overlay links stay visible.

Example: https://hextaui.com/docs/aspect-ratio/examples/overlay
Component docs: https://hextaui.com/docs/aspect-ratio.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/aspect-ratio-overlay.json
```

This adds `components/examples/aspect-ratio/overlay.tsx` with the Aspect ratio component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/aspect-ratio/overlay.tsx"
import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioOverlay() {
  return (
    <div className="w-full max-w-md">
      <AspectRatio ratio={16 / 9} className="rounded-xl">
        <img src="/preview/landscape.svg" alt="Sunset over mountains" />
        <div className="absolute inset-x-3 bottom-3 flex items-center justify-between gap-3 rounded-lg bg-background/80 px-3 py-2 text-sm backdrop-blur-sm">
          <span className="truncate font-medium">Dolomites at dusk</span>
          <a
            href="#"
            className="shrink-0 rounded-sm underline underline-offset-4 outline-none focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden"
          >
            View
          </a>
        </div>
      </AspectRatio>
    </div>
  )
}
```

## Props in this example

### AspectRatio

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `ratio` | `` number \| `${number}/${number}` \| `${number}:${number}` `` | `1` |  |

## More Aspect ratio examples

- [Ratios](https://hextaui.com/docs/aspect-ratio/examples/ratios.md)
- [Slow load](https://hextaui.com/docs/aspect-ratio/examples/slow-load.md)
- [Broken image](https://hextaui.com/docs/aspect-ratio/examples/broken-image.md)
- [Without placeholder](https://hextaui.com/docs/aspect-ratio/examples/without-placeholder.md)
- [Responsive](https://hextaui.com/docs/aspect-ratio/examples/responsive.md)
- [Inside a centered flex column](https://hextaui.com/docs/aspect-ratio/examples/flex-column.md)
- [Text content](https://hextaui.com/docs/aspect-ratio/examples/text-content.md)
- [As a figure](https://hextaui.com/docs/aspect-ratio/examples/figure.md)
- [Invalid ratio](https://hextaui.com/docs/aspect-ratio/examples/invalid-ratio.md)
- [Right to left](https://hextaui.com/docs/aspect-ratio/examples/rtl.md)