最新
网格与便当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 grid of whole-card product links with gradient art panels and one large feature tile.
<!-- Each tile is a whole-card link (focus ring on the anchor). Gradient panels
stand in for product art so there is no image to preload or let rot. -->
<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 flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white transition-shadow hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-800 dark:bg-gray-900 dark:focus-visible:ring-offset-gray-900 sm:col-span-2 sm:row-span-2">
<div class="min-h-40 flex-1 bg-gradient-to-br from-indigo-500 to-blue-600" aria-hidden="true"></div>
<div class="p-5">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Studio</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">The full design surface - canvas, components and handoff in one file.</p>
</div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white transition-shadow hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-800 dark:bg-gray-900 dark:focus-visible:ring-offset-gray-900">
<div class="min-h-24 flex-1 bg-gradient-to-br from-rose-500 to-orange-500" aria-hidden="true"></div>
<div class="p-4"><h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Boards</h3></div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white transition-shadow hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-800 dark:bg-gray-900 dark:focus-visible:ring-offset-gray-900">
<div class="min-h-24 flex-1 bg-gradient-to-br from-emerald-500 to-teal-600" aria-hidden="true"></div>
<div class="p-4"><h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Docs</h3></div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white transition-shadow hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-800 dark:bg-gray-900 dark:focus-visible:ring-offset-gray-900 sm:col-span-3">
<div class="min-h-20 flex-1 bg-gradient-to-r from-violet-500 to-fuchsia-500" aria-hidden="true"></div>
<div class="p-4"><h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Automations</h3><p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Wire your stack together without code.</p></div>
</a>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
products | Product[] | - | Products |
className | string | - | 合并到根元素上的额外类名。 |
Pass `products` of `{ name, tagline, href, gradient, className }`; the entire card is the link, so there is no tiny hotspot to miss, and the focus ring lives on the anchor. Gradient panels stand in for product art, so nothing loads or rots. Spans are `sm:`-prefixed and the base grid is one column.