फ़ीचर्डनया
इमेजImage Gallery Grid
An even, responsive grid of square thumbnails that steps from two up to four across.
#image#gallery#grid
2 फ्रेमवर्कशुरुआती
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 | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
srcआवश्यक | string | - | कार्ड की तस्वीर के लिए इमेज URL। |
imageAlt | string | '' | इमेज के लिए वैकल्पिक टेक्स्ट। जब title में पहले से नाम हो तो खाली रखें। |
caption | string | - | तालिका का कैप्शन, सामग्री से पहले स्क्रीन रीडर को सुनाया जाता है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
`<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.