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
Calculated Fields Demo
A booking estimate that updates from visit count, visit rate, extras and key collection.
Number of visits
Price per visit (£)
Extras
Medication support
+£4
Timed feeding routine
+£3
Photo update bundle
+£2
Plant watering
+£3
Key collection
No key collection needed
£0
Collect keys locally
+£8
Return keys after booking
+£8
Collect and return keys
+£15
Estimated total
Send calculation demo
Back to test hub