Canvas Design System Figma File
Branding & Design
Bubble Pages & Blocks
Roles & Permissions
Menus & Navigation
Data & Workflows
Emails & Alerts
Privacy rule checker
Bubble Best Practices
Learning Bubble Basics
Monthly Calendar Scheduling Widget
No Reply Comments Thread
Nested Comments Thread (with Like and Reply)
List with Circular Progress Bar Repeating Group
Top Input Chat Widget
Bottom Input Chat Widget
Toggle Tabs Group
Single-Select or Multi-Select Pill Tabs Group
To-Do List Repeating Group
Title Group with Button and Filters
Product Details Group With Progress Bar
Listing details with Icons and Menu Focus Group
Week Daily Availability Group
Frequently Asked Questions (FAQ) Repeating Group
Add to Cart Group
Full Width Map with Directions Link
Location Module (Map and Directions)
Drag and Drop Repeating Group
Infinite Columns Horizontal Scroll Data Table with Fixed First Column
Use this to display a video on a page in a group (or convert it to a popup).
This is a fully-responsive block that includes a video element (YouTube or Vimeo), tags, title, and descriptions. No workflows are associated with this block.
When this block is added to a page, it is placed within a group called
Blocks container 860 (do not rename)
on the page. This group contains the responsive settings for all blocks.
This block contains three main groups:
Group Responsive left vertical padding
Group Responsive right vertical padding
For responsiveness (please do not delete), this maintains the padding between the content and the outer parent group.
Group Inner inner video content
- If you add more elements to the group, please ensure that they are contained within this main content group.
This block will also include a
that you can customize.
How to set up
video source (YouTube or Vimeo) and update the video ID field (it's usually the ID shown in the URL when watching this video on YouTube or Vimeo. It can be a dynamic ID:
YouTube video ID is usually 12 characters long
Vimeo video ID is usually 10 characters long
Update the data source of the title text and description text
Update the data source of
Modify the choices style to dynamic or static based on your needs
Remove any elements in the block that you do need and adjust the group height (there should be 40px padding at the bottom of the group).
How to set up