Skip to main content
Skip to footer
Opens in a new tab
Bricks Playground
Home
Delayed Render
Delayed Render for Bricks
Defer server-rendered Bricks templates until a runtime condition is met.
Open the test hub
Loading strategies
Basic viewport
Click
Delay and idle
Parent open
Popup
Offcanvas
Content and performance
Filters basic
Filters pagination
CSS control
CSS delayed
Media
Multiple instances
Forms in delayed templates
Forms
Basic runtime
Success panel
Field conditions
Multistep review
International fields
Form Enhancements
Form Enhancements
Opt-in enhancements for the native Bricks Form element.
Browse all demos
Fields and options
Enhanced Selects
Option Layouts
Input Masks
Calculated Fields
Dynamic Options
International Fields
Location Button
Animated Panel
Logic and behaviour
Field Conditions
Submit Conditions
Multi-step and Review
Combined Demo
Feedback and polish
Success Panel
Dynamic HTML Output
Icons and Classes
Validation Highlight
Calendar Picker
Basic Form
Enhanced Bricks
Enhanced Bricks
Native-feeling extra controls for core Bricks elements.
Overview
Typography
Headings
Reveal, clip, blur and slide effects.
Heading test
Extended heading effect checks.
Text and links
Inline link and text reveal effects.
Media and layout
Images and loops
Image zoom-pan and loop reveals.
Surfaces and cards
Pointer light, tilt, glow and glass.
Interaction
Buttons and dividers
Hover and viewport animations.
Icons and icon boxes
Rotate, bounce and pulse effects.
Tabs and Accordion
Responsive accordion for Tabs.
Elements
Bricks Elements
Standalone elements for galleries, headings, SVG and responsive text.
Browse all elements
Images
Random Image
Random photos from a pool, no repeats.
Airbnb Gallery
Tiled gallery with lightbox.
Album
Cover or button opens a set.
Type and motion
Multi Heading
Styled fragments in one heading.
SVG Animation
Drawn-in strokes.
Responsive Text
Different text per breakpoint.
Section Extensions
Galleries
Enhanced Galleries
One gallery element, five layouts, a lightbox with deep links.
Overview
Layouts
Pattern grid
Presets and a custom cell table.
Uniform grid
Equal cells at one aspect ratio.
Justified rows
Equal-height rows, no cropping.
Masonry
Mixed-height columns.
Featured plus thumbnails
One large image and a thumbnail strip.
Mosaic
Stacked pairs, never cropped.
Options and features
Pattern options
Portrait placement and leftover handling.
Lightbox and deep links
Share a link to one exact image.
Appearance Presets
Home
Delayed Render
Delayed Render for Bricks
Defer server-rendered Bricks templates until a runtime condition is met.
Open the test hub
Loading strategies
Basic viewport
Click
Delay and idle
Parent open
Popup
Offcanvas
Content and performance
Filters basic
Filters pagination
CSS control
CSS delayed
Media
Multiple instances
Forms in delayed templates
Forms
Basic runtime
Success panel
Field conditions
Multistep review
International fields
Form Enhancements
Form Enhancements
Opt-in enhancements for the native Bricks Form element.
Browse all demos
Fields and options
Enhanced Selects
Option Layouts
Input Masks
Calculated Fields
Dynamic Options
International Fields
Location Button
Animated Panel
Logic and behaviour
Field Conditions
Submit Conditions
Multi-step and Review
Combined Demo
Feedback and polish
Success Panel
Dynamic HTML Output
Icons and Classes
Validation Highlight
Calendar Picker
Basic Form
Enhanced Bricks
Enhanced Bricks
Native-feeling extra controls for core Bricks elements.
Overview
Typography
Headings
Reveal, clip, blur and slide effects.
Heading test
Extended heading effect checks.
Text and links
Inline link and text reveal effects.
Media and layout
Images and loops
Image zoom-pan and loop reveals.
Surfaces and cards
Pointer light, tilt, glow and glass.
Interaction
Buttons and dividers
Hover and viewport animations.
Icons and icon boxes
Rotate, bounce and pulse effects.
Tabs and Accordion
Responsive accordion for Tabs.
Elements
Bricks Elements
Standalone elements for galleries, headings, SVG and responsive text.
Browse all elements
Images
Random Image
Random photos from a pool, no repeats.
Airbnb Gallery
Tiled gallery with lightbox.
Album
Cover or button opens a set.
Type and motion
Multi Heading
Styled fragments in one heading.
SVG Animation
Drawn-in strokes.
Responsive Text
Different text per breakpoint.
Section Extensions
Galleries
Enhanced Galleries
One gallery element, five layouts, a lightbox with deep links.
Overview
Layouts
Pattern grid
Presets and a custom cell table.
Uniform grid
Equal cells at one aspect ratio.
Justified rows
Equal-height rows, no cropping.
Masonry
Mixed-height columns.
Featured plus thumbnails
One large image and a thumbnail strip.
Mosaic
Stacked pairs, never cropped.
Options and features
Pattern options
Portrait placement and leftover handling.
Lightbox and deep links
Share a link to one exact image.
Appearance Presets
Best fit (default)
Each block is rearranged so portraits land in the tall cells and landscapes in the wide ones, with the least cropping.
Keep the order I set, always crop
Photos stay in the order chosen and are cropped to fill every cell. This is what cuts off portraits.
Keep the order, show whole on a blurred backdrop
Same order, but any photo that would lose more than 30% to cropping is shown whole.
Keep the order, show whole on a plain background
The same, with a plain background instead of the blur.
Pattern options
Portrait placement and leftover handling for the pattern grid.
Leftover images: fill
Seven images do not fill a six-image block. Fill spreads the last images across even cells.
Leftover images: hide
The same seven images, with the incomplete block hidden.
Leftover images: leave gaps
The same seven images, leaving the empty cells as they are.