新着
グリッド・ベントFeature Bento 3x2
Asymmetric feature tiles where a hero cell spans two columns and two rows and the rest pack around it.
#bento#features#grid
3 個のフレームワーク中級
Loading…
A portfolio of whole-tile project links over gradient thumbnails with a masonry-style span layout.
<!-- Whole-tile links over gradient thumbnails; the caption sits in a scrim gradient
so its text clears AA on any thumbnail. Varying row-spans give the masonry feel
on desktop only - one clean column at 320px. -->
<section class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 p-4 sm:grid-cols-3 sm:p-6">
<a href="#" class="group relative flex min-h-56 flex-col justify-end overflow-hidden rounded-2xl bg-gradient-to-br from-purple-600 to-indigo-700 p-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100 dark:focus-visible:ring-offset-gray-900 sm:col-span-2 sm:row-span-2">
<span class="relative text-lg font-semibold text-white">Aurora - brand system</span>
<span class="relative text-sm text-white/80">Identity</span>
</a>
<a href="#" class="group relative flex min-h-40 flex-col justify-end overflow-hidden rounded-2xl bg-gradient-to-br from-rose-500 to-orange-500 p-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100 dark:focus-visible:ring-offset-gray-900">
<span class="relative text-base font-semibold text-white"> Member app</span>
<span class="relative text-sm text-white/80">Product</span>
</a>
<a href="#" class="group relative flex min-h-40 flex-col justify-end overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 p-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100 dark:focus-visible:ring-offset-gray-900">
<span class="relative text-base font-semibold text-white">Field report</span>
<span class="relative text-sm text-white/80">Editorial</span>
</a>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
projects | Project[] | - | Projects |
className | string | - | ルート要素にマージされる追加クラス。 |
Pass `projects` of `{ title, category, href, gradient, className }`; the whole tile is the link with a focus ring offset against the surface. Varying `row-span`s give the masonry feel on desktop, but every span is `sm:`-prefixed so at 320px it is one clean column and nothing clips.