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 tall image card with a title and meta reversed out over a gradient at the base.
<a
href="#"
class="group relative flex aspect-[3/4] w-full max-w-xs items-end overflow-hidden rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-950"
>
<img src="/images/photo-3.jpg" alt="Portrait of a ceramicist at their wheel" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105 motion-reduce:transform-none" />
<div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/10 to-transparent" aria-hidden="true"></div>
<div class="relative p-4">
<h3 class="text-base font-semibold text-white">Hands and clay</h3>
<p class="mt-0.5 text-xs text-gray-200">Studio series · No. 04</p>
</div>
</a>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
meta | string | - | Short supporting facts shown beneath the heading. |
src | string | - | Image URL for the card's picture. |
imageAlt | string | '' | Alternative text for the image. Empty when the title already names it. |
href | string | '#' | Destination the card links to. |
className | string | - | Additional classes merged onto the root element. |
The `from-black/75` gradient guarantees contrast for the white caption regardless of what the photo does at the bottom edge - it is the legibility layer, not styling. The card is a single link with a focus ring offset against the image. The glow variant adds a coloured `shadow`, and the gradient variant swaps the photo for a pure-CSS gradient when you have no art yet.