FeaturedNew
ImagesCaptioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 frameworksBeginner
Loading…
A fixed-ratio image frame - square, 16:9 or portrait - that holds its space as it loads.
<!-- The aspect box reserves layout height before the image decodes, so the
page never jumps (the real cause of a bad CLS score). Swap the ratio class
for aspect-square or aspect-[3/4] as needed. -->
<div class="w-full max-w-md">
<div class="aspect-video overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
<img src="/images/photo-4.jpg" alt="Studio desk with a camera and prints" loading="lazy" class="h-full w-full object-cover" />
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
srcrequired | string | - | Image URL for the card's picture. |
imageAlt | string | '' | Alternative text for the image. Empty when the title already names it. |
ratio | 'square' | 'video' | 'portrait' | 'video' | Ratio |
className | string | - | Additional classes merged onto the root element. |
The aspect box reserves the exact layout height before the image decodes, which is the real fix for a poor cumulative-layout-shift score. The ratio is a prop mapped to a static class (`aspect-square`, `aspect-video`, `aspect-[3/4]`) rather than an interpolated one, so Tailwind ships the class. `object-cover` crops to fill; switch to `object-contain` to letterbox instead.