Bento Grid

Responsive bento grid of cards in mixed sizes. Pro · Landing pages and brand › Hero

A grid of feature cards of different widths and heights: put BentoCards inside.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add bento-grid

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { BentoGrid } from 'valyro-ui-pro';

Prop	Type	Default
`columns`	`2 \| 3 \| 4`	`3`	Columns on wide containers; they drop to two and then one as the grid narrows. Default 3.
`gap`	`'sm' \| 'md' \| 'lg'`	`'md'`	Space between cards. Default `md`.

Hero Section — Landing page hero
Feature Grid — Feature grid
Logo Cloud — Customer logos
Pricing Table — Pricing plans
Comparison Table — Product comparison
Testimonials — Customer testimonials
FAQ Section — Frequently asked questions
Award Badge — Award badge with a laurel wreath, stars and caption
CTA Section — Call-to-action block
Newsletter Signup — Newsletter signup
App Store Buttons — App store buttons: App Store, Google Play, Galaxy Store, RuStore
Footer — Site footer