Flexible bento-type grid with 8 different block types. Ideal for features, stats sections, image mosaics, or product showcases.
Grid / Bento
The Grid section is a flexible "bento"-type grid that lets you mix different types of content in a structured layout. With 8 block types and 6 presets, it adapts to a wide variety of use cases.
6 Presets
| Preset | Description | Blocks used |
|---|---|---|
| Features | Feature grid with icons | Grid Feature |
| Bento | Mixed bento layout with images, stats, and CTA | Grid Image + Feature + Stat + CTA |
| Stats | Key figures in a flat grid | Grid Stat |
| Mosaic | Image mosaic with variable sizes | Grid Image |
| Video Showcase | Video grid | Grid Video |
| Product Highlights | Product showcase | Grid Product |
Main Settings
Layout
| Setting | Description | Options | Default |
|---|---|---|---|
| Desktop columns | Number of columns | 2-6 | 3 |
| Mobile columns | Columns on mobile (grid mode) | 1 / 2 | 1 |
| Gap | Spacing between cards | 0-60px | 20px |
Card Style
| Setting | Description | Options | Default |
|---|---|---|---|
| Card style | Card appearance | Flat / Elevated / Outlined / Glass | Elevated |
| Border radius | Corner rounding | 0-32px | 12px |
| Padding | Internal spacing | 0-48px | 24px |
Hover Effects
| Setting | Description | Options | Default |
|---|---|---|---|
| Hover effect | Animation on hover | None / Lift / Zoom / Border / Glow / Tilt | Lift |
| Hover intensity | Effect strength | 100-120% | 106% |
| Hover border | Colored border on hover | On / Off | Off |
| Glow | Glow effect around cards | On / Off | Off |
| Glow color | Glow color | Accent 1 / Accent 2 | Accent 1 |
| Glow intensity | Glow effect strength | Subtle / Medium / Strong | Medium |
Mobile
| Setting | Description | Options | Default |
|---|---|---|---|
| Mobile behavior | Display on mobile | Grid / Slider | Grid |
| Mobile slides | Number of visible slides | 1-3 (in 0.1 increments) | 1.2 |
| Slider navigation | Navigation arrows | On / Off | Off |
| Slider pagination | Pagination dots | On / Off | On |
Available Blocks
Heading Block (limit 1)
Section title with configurable subtitle, bold text style, and heading level.
8 Content Block Types
| Block | Description | Content |
|---|---|---|
| Grid Feature | Feature card with icon | Icon + Title + Description |
| Grid Image | Image card | Image + Overlay title + Link |
| Grid Stat | Key figure | Statistical value + Label |
| Grid CTA | Call-to-action | Title + Description + Button |
| Grid Quote | Quote | Text + Author + Avatar |
| Grid Video | Embedded video | YouTube/Vimeo video + Title |
| Grid Product | Product card | Shopify product + Price + Vendor |
| Grid Collection | Collection card | Collection + Image + Product count |
Block Sizes
Each block can be resized to create asymmetric bento-type layouts:
| Size | Columns occupied | Ideal for |
|---|---|---|
| Normal | 1 column | Standard content |
| Wide | 2 columns | CTAs, panoramic images |
| Large | 2 columns + 2 rows | Hero images, main content |
ℹ️Wide and Large sizes allow you to create asymmetric bento layouts. A "Large" block occupies 2x2 in the grid, visually dominating the "Normal" blocks around it.
Use Cases
"Why Choose Us" Section
- Features preset with 3 columns
- 3-6 Grid Feature blocks with icons
- Elevated style for modern cards
- Lift hover effect
Creative Bento Layout
- Bento preset with 4 columns
- Mix of blocks: 1 Large Image + 1 Normal Feature + 1 Normal Stat + 1 Wide CTA
- Elevated style, 16px gap
- Lift hover effect
Key Figures
- Stats preset with 4 columns
- 4 Grid Stat blocks
- Flat style (no visible card)
- No hover effect for a clean look
Image Mosaic
- Mosaic preset with 4 columns
- Mix of sizes: Large, Normal, Wide
- Zoom hover effect
- 8px border radius, 12px gap
Video Showcase
- Video Showcase preset with 3 columns
- 1 Large video + 2 Normal videos
- Elevated style with 12px border radius
- YouTube or Vimeo links
Product Showcase
- Product Highlights preset with 4 columns
- 4 Grid Product blocks
- Show price and vendor
- Link to product page
💡The Glass style creates a frosted glass effect (glassmorphism) that is very trendy. It works particularly well with a dark color palette or a section background image.
⚠️Mobile slider mode is recommended when you have more than 4 blocks: it avoids a long column on mobile. Set mobile slides to 1.2 to show a preview of the next card and encourage swiping.