最新
网格与便当Product Showcase Bento
A grid of whole-card product links with gradient art panels and one large feature tile.
#bento#product#showcase
3 个框架中级
Loading…
Asymmetric feature tiles where a hero cell spans two columns and two rows and the rest pack around it.
<!--
The grid is grid-cols-1 on phones; every span is sm:-prefixed. The big tile's
sm:col-span-2 sm:row-span-2 is the whole bento effect, and it is desktop-only -
at 320px each tile is one full-width row and nothing can overflow.
-->
<section class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 p-4 sm:grid-cols-3 sm:p-6">
<article class="flex min-h-32 flex-col rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900 sm:col-span-2 sm:row-span-2">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Realtime sync</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Every change lands on every device the instant it happens - no refresh, no merge dialog.</p>
</article>
<article class="flex min-h-32 flex-col rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Version history</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Roll back to any point.</p>
</article>
<article class="flex min-h-32 flex-col rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Access control</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Roles down to the field.</p>
</article>
<article class="flex min-h-32 flex-col rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Audit log</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Who did what, when.</p>
</article>
<article class="flex min-h-32 flex-col rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900 sm:col-span-2">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Integrations</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Connect the tools your team already lives in, in a couple of clicks.</p>
</article>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
features | Feature[] | - | 功能文案字符串数组。 |
className | string | - | 合并到根元素上的额外类名。 |
Feed the `features` array; each tile carries its own span classes (`sm:col-span-2 sm:row-span-2`, etc.) because the span is the layout, not decoration. Those spans are all `sm:`-prefixed, so below the breakpoint the grid is `grid-cols-1` and every tile is one full-width row - nothing can overflow a 320px phone.