注目新着
画像Captioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 個のフレームワーク初級
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 | 型 | デフォルト | 説明 |
|---|---|---|---|
title必須 | string | - | カードの見出しテキスト。 |
meta | string | - | 見出しの下に表示する補足的な情報。 |
src | string | - | カードの画像の URL。 |
imageAlt | string | '' | 画像の代替テキスト。title で内容が伝わる場合は空文字にします。 |
href | string | '#' | カードのリンク先。 |
className | string | - | ルート要素にマージされる追加クラス。 |
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.