新着
グリッド・ベント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…
Feature tiles each led by an inline-SVG icon in a rounded badge, arranged as a bento grid.
<!-- Inline SVG icons (aria-hidden - the heading names the feature). Grid is one
column on phones; the wide tile only spans from sm: up. -->
<section class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 p-4 sm:grid-cols-2 sm:p-6">
<article class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900 sm:col-span-2">
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="h-5 w-5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"/></svg>
</span>
<h3 class="mt-3 text-base font-semibold text-gray-900 dark:text-gray-100">Fast by default</h3>
<p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Edge-rendered and cached - pages arrive before the spinner would.</p>
</article>
<article class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="h-5 w-5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m9 12 2 2 4-4"/></svg>
</span>
<h3 class="mt-3 text-base font-semibold text-gray-900 dark:text-gray-100">Secure</h3>
<p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">SOC 2 controls baked in.</p>
</article>
<article class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="h-5 w-5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4 19V5m0 14h16M8 15v-4m4 4V9m4 6v-2"/></svg>
</span>
<h3 class="mt-3 text-base font-semibold text-gray-900 dark:text-gray-100">Insightful</h3>
<p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Metrics that mean something.</p>
</article>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
features | IconFeature[] | - | 機能を表す文字列のリスト。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Icons are inline SVG chosen by an `icon` key (`bolt`, `shield`, `chart`) and rendered `aria-hidden` because the heading names the feature. Pass `features` with an optional span `className`; the grid is a single column below `sm`, and the wide tile only spans from `sm:` up.