FeaturedNew
ImagesImage Gallery Grid
An even, responsive grid of square thumbnails that steps from two up to four across.
#image#gallery#grid
2 frameworksBeginner
Loading…
An image and its caption tied together with figure and figcaption, in a rounded frame.
<!-- figure + figcaption ties the caption to the image semantically. The image
is decorative to the caption's text, but here it carries its own meaning,
so it keeps real alt. -->
<figure class="mx-auto w-full max-w-lg">
<div class="aspect-[4/3] overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
<img src="/images/photo-1.jpg" alt="Sunrise over a mountain ridge" loading="lazy" class="h-full w-full object-cover" />
</div>
<figcaption class="mt-3 text-sm leading-relaxed text-gray-500 dark:text-gray-400">
First light on the ridge, shot on a 35mm lens at f/8.
</figcaption>
</figure>| 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. |
caption | string | - | The table's caption, announced to screen readers before its contents. |
className | string | - | Additional classes merged onto the root element. |
`<figure>` with `<figcaption>` links the caption to the image semantically, so assistive tech reads them as one unit. The image keeps real `alt` because it carries meaning of its own here; make the `alt` empty only when the caption fully describes it. The `aspect-[4/3]` box reserves height so the caption never jumps up as the photo decodes.