# I am looking for a feature bento grid layout with backgrounds… [Open the live Fudge conversation](https://design.withfudge.com/share/2fc6w5s0uz/i_am_looking_for_a_feature_bento_grid_layout_with_backgrounds/) Last updated: 2026-09-01 For a **feature bento grid with visual backgrounds inside each tile**, these are the strongest references: ### 1. Pop Site — closest match ## Captured pages [![Pop Site - Free Personal Site Builder & Linktree Alternative](https://pin.fontofweb.com/7725?format=jpg)](https://design.withfudge.com/share/pin-7725) [Pop Site - Free Personal Site Builder & Linktree Alternative](https://design.withfudge.com/share/pin-7725) ![Pop Site reference](https://pin.fontofweb.com/7725) **Why it works:** each feature card has its own contained background area, image, or product UI preview. The repeated card structure keeps the layout organized while the different visuals create variety. ### 2. Anytype — structured product bento ## Captured pages [![The Everything App](https://pin.fontofweb.com/1976?format=jpg)](https://design.withfudge.com/share/pin-1976) [The Everything App](https://design.withfudge.com/share/pin-1976) ![Anytype reference](https://pin.fontofweb.com/1976) **Why it works:** the large feature tile establishes hierarchy, while the smaller tiles below use their own dark UI backgrounds and compact visual modules. ### 3. WordPress.com — image-led tile backgrounds ## Captured pages [![WordPress.com: Everything You Need to Build Your Website](https://pin.fontofweb.com/4488?format=jpg)](https://design.withfudge.com/share/pin-4488) [WordPress.com: Everything You Need to Build Your Website](https://design.withfudge.com/share/pin-4488) ![WordPress reference](https://pin.fontofweb.com/4488) **Why it works:** the tiles feel like separate canvases. Full-bleed imagery, strong crops, and varied visual treatments make the grid feel more editorial and expressive. ## Recommended structure Use a grid like: ```text ┌───────────────────────┬───────────────┐ │ │ Feature 2 │ │ Feature 1 │ with image bg │ │ large visual bg ├───────────────┤ │ │ Feature 3 │ └───────────────┬───────┴───────────────┘ │ Feature 4 with visual bg └──────────────────────── ``` For each tile: - Give the visual background its own contained region. - Use `overflow: hidden` and rounded corners. - Add a subtle gradient overlay when text sits on the image. - Keep the title and description anchored consistently—usually bottom-left. - Mix tile sizes, but keep the internal padding and typography consistent. - Use product screenshots, abstract gradients, illustrations, video stills, or UI fragments as the backgrounds. - On mobile, collapse into a single column while preserving the larger feature tile first. A good formula is: ```text Tile background / preview ↓ Feature title Short supporting description Optional arrow or interaction cue ``` The **Pop Site reference** is the best starting point if you want a clean SaaS/product presentation. The **Anytype reference** is better if you want a more distinctive, editorial bento composition. --- Here are more references in the same direction—**modular feature cards with an image, mockup, or visual scene contained inside each tile**. ## Closest matches ### Framer — colorful visual bento ## Captured pages [![Framer: Create a professional website, free. No code website builder loved by designers.](https://pin.fontofweb.com/880?format=jpg)](https://design.withfudge.com/share/pin-880) [Framer: Create a professional website, free. No code website builder loved by designers.](https://design.withfudge.com/share/pin-880) ![Framer reference](https://pin.fontofweb.com/880) **Useful for:** a bold, colorful version of the layout. Use one oversized lead card and four smaller supporting cards with different background colors. --- ### With Supafast — tall visual feature cards ## Captured pages [![Branding, Product & Web Development for Startups](https://pin.fontofweb.com/3170?format=jpg)](https://design.withfudge.com/share/pin-3170) [Branding, Product & Web Development for Startups](https://design.withfudge.com/share/pin-3170) ![With Supafast reference](https://pin.fontofweb.com/3170) **Useful for:** portfolio, agency, or service pages. The cards feel like large visual posters rather than standard content boxes. --- ### Kree8 Studio — simple service grid ## Captured pages [![Kree8 - A Creative Agency](https://pin.fontofweb.com/2994?format=jpg)](https://design.withfudge.com/share/pin-2994) [Kree8 - A Creative Agency](https://design.withfudge.com/share/pin-2994) ![Kree8 reference](https://pin.fontofweb.com/2994) **Useful for:** a restrained version close to your screenshot. Keep the cards white, use subtle borders, and let the image area carry the visual interest. ## More expressive variations ### Baked Design — floating product visuals ## Captured pages [![Baked Design - Product Design Partner](https://pin.fontofweb.com/5260?format=jpg)](https://design.withfudge.com/share/pin-5260) [Baked Design - Product Design Partner](https://design.withfudge.com/share/pin-5260) ![Baked Design reference](https://pin.fontofweb.com/5260) **Useful for:** making each feature feel more dimensional. Instead of placing one image neatly inside each card, allow mockups to overlap or extend beyond the tile. --- ### Lovable — template gallery cards ## Captured pages [![Lovable - Build Apps & Websites with AI, Fast | No Code App Builder](https://pin.fontofweb.com/7242?format=jpg)](https://design.withfudge.com/share/pin-7242) [Lovable - Build Apps & Websites with AI, Fast | No Code App Builder](https://design.withfudge.com/share/pin-7242) ![Lovable reference](https://pin.fontofweb.com/7242) **Useful for:** a product or template showcase where every card represents a different use case, theme, or outcome. --- ### Pop Site — strongest match to your screenshot ## Captured pages [![Pop Site - Free Personal Site Builder & Linktree Alternative](https://pin.fontofweb.com/7725?format=jpg)](https://design.withfudge.com/share/pin-7725) [Pop Site - Free Personal Site Builder & Linktree Alternative](https://design.withfudge.com/share/pin-7725) ![Pop Site reference](https://pin.fontofweb.com/7725) **Useful for:** keeping the exact logic of your reference—consistent image frame, phone mockup, heading, and explanatory copy. ## Layout directions worth exploring ### Option A — Clean 3-column grid ```text ┌──────────────┬──────────────┬──────────────┐ │ image/mockup │ image/mockup │ image/mockup │ │ Feature │ Feature │ Feature │ │ Description │ Description │ Description │ └──────────────┴──────────────┴──────────────┘ ``` Best match: **Pop Site** or **Kree8**. ### Option B — One large card plus four small cards ```text ┌──────────────────────┬──────────────┐ │ │ Feature │ │ Main feature ├──────────────┤ │ large visual │ Feature │ ├──────────────┬───────┴──────────────┤ │ Feature │ Feature │ └──────────────┴──────────────────────┘ ``` Best match: **Framer** or **Lovable**. ### Option C — Tall editorial cards ```text ┌──────────┬──────────┬──────────┬──────────┐ │ visual │ visual │ visual │ visual │ │ │ │ │ │ │ title │ title │ title │ title │ └──────────┴──────────┴──────────┴──────────┘ ``` Best match: **With Supafast**. ### My recommendation For your design, I’d combine: - **Pop Site’s consistent phone mockup framing** - **Kree8’s clean card spacing** - **Framer’s varied tile sizing** - **Baked Design’s occasional floating or oversized visual** That would preserve the clear, organized 3-column grid while making the section feel less repetitive.