featuresIntermediatehover
Bento Feature Grid
Apple-style bento layout showcasing mixed-size feature cards.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build an Apple-style bento grid: a 4-column grid where some cells span 2×2 (big feature) or 2×1 (chart, headline). Cells have rounded-2xl corners, white backgrounds, subtle borders, and a hover lift (translateY + soft shadow). Mix card content: a dark feature card with two blurred-purple/cyan radial-gradient orbs in the corners; a peach 'stats' card with a giant Bebas Neue number; a dark chart card with 8 animated bar columns at varying heights; an Instrument Serif italic blockquote; a tag-chip cluster (React/TS/Tailwind/Motion) with brand-colored pills; and a yellow card with a serif italic 'Forever.' headline pointing to GitHub. The whole thing reads as a polished SaaS overview section.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-bento-grid
-->
<section class="bento"><div class="cell big"><div class="orb"></div><div class="orb o2"></div><h3>Designed for builders.</h3><p>Every component documented, every state considered.</p></div><div class="cell stat"><span class="num">10x</span><span class="lbl">faster shipping</span></div><div class="cell pic"><div class="chart"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><h4>Real metrics.</h4><p>Watch your velocity climb in real time.</p></div><div class="cell quote"><span class="q">"</span><p>Switching to this team transformed how we ship.</p><span class="name">Casey Morgan, Engineering Lead</span></div><div class="cell tag"><span class="chip">React</span><span class="chip">TypeScript</span><span class="chip">Tailwind</span><span class="chip">Motion</span></div><div class="cell big2"><h3>Open source.<br><em>Forever.</em></h3><a href="#">View on GitHub →</a></div></section>