CMS MasonBox
CMS MasonBox turns a Framer CMS Collection into a responsive masonry grid with one-click lightbox (images + video), captions, keyboard/touch navigation, etc...
Make it with Workshop
Build your own component with AI
CMS MasonBox turns a Framer CMS Collection into a responsive masonry grid with one-click lightbox (images + video), captions, keyboard/touch navigation, etc...
Make it with Workshop
Build your own component with AI
CMS MasonBox - Masonry Layout with Image & Video Lightbox (optional filter)CMS MasonBox is a powerful masonry component that transforms your Framer CMS collections into beautiful, responsive grid layouts. Perfect for designers and agencies who need to showcase portfolios, product galleries, blog posts, or any content collection with style.
Demo (no-filter): https://cms-masonry-lightbox.framer.photos/
Demo (with filter): https://cms-masonry-lightbox-filter.framer.photos/
Get started instantly with our remix link - no complex setup required. Just connect your CMS, customize the styling, and you're done.
✓ Easy Setup - Get started with our remix link, no coding required
✓ Masonry Layout - Beautiful, self-balancing grid that adapts to your content
✓ Image & Video Support - Display images, YouTube, Vimeo, and local videos
✓ Lightbox - Click to view media in full screen with smooth transitions
✓ Category Filtering - Let visitors filter content by categories (Filter version)
✓ Fully Responsive - Looks perfect on desktop, tablet, and mobile
✓ Customizable - Control columns, spacing, colors, hover effects, and more
Remix the Project
Click the remix link (included with purchase) to add the component to your Framer project. The project includes:
- Ready-to-use CMSMasonbox component
- Example CMS collection with sample data
- Pre-configured settings you can customizeor
1. Select the CMSMasonbox component on your canvas
2. Choose your CMS collection from the "Slot" dropdown in the properties panel
3. Enter your field names:
- Image Field: The name of the CMS field containing images (e.g., "thumbnail", "image", "cover")
- Video Field: The name of the CMS field containing videos (e.g., "video", "videoUrl")
- Category Field (Filter version): The field containing categories (e.g., "category", "type")
Note: You'll see dummy content in the canvas editor. In preview mode and on your published site, it will automatically display your real CMS data.
Adjust the masonry layout to match your design:
- Columns: Set how many columns to display (1-12)
- Gap: Control spacing between items
- Hover Effects: Enable/disable and customize hover colors
- Border Radius: Round corners if desired
Step 3: Set Up Filtering (Filter version only)
To enable category filtering:
1. Add CMSMasonboxFilter component to your canvas
2. Enter the same category field name you used in CMSMasonbox (e.g., "category")
3. Important: Both components must use the exact same field name to work together
4. Customize filter styling: Colors, spacing, pill shapes, etc.
- In the canvas editor, you'll see dummy filter pills
- In preview/published site, the filter automatically populates with your CMS categories
- Clicking a filter updates the masonry layout in real-time
- Choose single-select or multi-select mode
Intelligent Masonry Layout
The component automatically arranges your content in a balanced grid:
- Items flow into the shortest column for optimal visual balance
- Automatically adjusts when items load or window resizes
- Handles mixed content heights perfectly
Media SupportDisplay various media types seamlessly:
- Images: Any image from your CMS
- YouTube Videos: Just add the YouTube URL to your CMS field
- Vimeo Videos: Works with Vimeo URLs too
- Local Videos: Upload and use your own video files
- Priority: If both image and video fields are present, video takes priority
Lightbox Viewer
Click any item to view in full screen:
- Smooth open/close animations
- Swipe or click to navigate between items
- Close with ESC key or close button
- Works perfectly on mobile and desktop
Filter System (Filter version)
Let visitors find exactly what they're looking for:
- Single-Select Mode: Only one category active at a time (like radio buttons)
- Multi-Select Mode: Select multiple categories to see combined results (like checkboxes)
- Field Sync: Just use the same CMS field name in both components
- Auto-Population: Filter buttons automatically populate from your CMS data
We offer three variants to suit different needs:
1. CMS MasonBox - $29
Perfect for individual projects
- Masonry layout with image + video support
- Lightbox for full-screen viewing
- Customizable hover effects
- Remix link included
- Per-site commercial license** (per project/domain).
- Not allowed to resell as standalone or include in templates
2. CMS MasonBox with Filter - $49
Enhanced version with filtering
- Everything in basic version
- Category filter component with pill-style display
- Single or multi-select modes
- Customizable filter styling
- Remix link included
- Per-site commercial license** (per project/domain).
- Not allowed to resell as standalone or include in templates
3. Creator License - $99
For template creators
- Everything in filter version
- Remix link included
- Allowed to include in templates for resale
- One license = One template
- Perfect for Framer template creators and agenciesDue to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!
For Questions: Contact me via @shahul or contact[at]amazee.studio
