Feature Bento

bento x asymmetric

An asymmetric bento of feature tiles — one wide lead tile plus supporting cards.

bentofeaturesgrid

Fast by default

Secure

On-brand

Ready to copy

Code

feature-bento.tsx

const tiles = [
  { title: "Fast by default", span: "md:col-span-2" },
  { title: "Secure", span: "" },
  { title: "On-brand", span: "" },
  { title: "Ready to copy", span: "md:col-span-2" },
];

export function FeatureBento() {
  return (
    <section className="mx-auto grid max-w-5xl grid-cols-1 gap-4 px-6 py-24 md:grid-cols-3">
      {tiles.map((t) => (
        <div key={t.title} className={"rounded-2xl border border-border bg-card p-6 " + t.span}>
          <h3 className="text-lg font-medium">{t.title}</h3>
          <p className="mt-2 text-sm text-muted-foreground">One clear sentence about the benefit.</p>
        </div>
      ))}
    </section>
  );
}

Use it in another build

Drop this section into a page, keep your project tokens, and it themes itself. Or tell Claude Code: “add the Feature Bento section and fill it with my copy.”