# Billings Source: https://docs.brikl.co/billings # Carts Source: https://docs.brikl.co/carts # Checkouts Source: https://docs.brikl.co/checkouts # Accordion 01 Source: https://docs.brikl.co/components/elements/accordions/accordion-01 Vertical accordion list with toggle icons, bold titles, and collapsible answer text panels. ![Accordion 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-with-chevron.png) ## Overview Accordion 01 is a FAQ-style accordion component featuring multiple collapsible items. Each item contains a title, a caret icon, and a hidden content panel that expands or collapses when clicked. It uses custom states to track which item is currently open, toggling visibility accordingly. Ideal for FAQ sections, feature explanations, or any content that benefits from progressive disclosure. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | Item Open | User clicks on an accordion toggle group (Toggle 01, 02, 03, or 04) | The corresponding content group becomes visible and expands; if the same item is clicked again, it collapses back to hidden | | Item Closed | User clicks the same open accordion item again, or a custom state value is reset to 0 | The content panel collapses and becomes hidden, caret icon returns to default orientation | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - Accordion 01 / Toggle 01 clicked | Sets custom state 'accordion\_item\_' on the container: if current value equals item\_01, reset to 0 (close); otherwise set to item\_01 value (open) | | GP - Accordion 01 / Toggle 02 clicked | Sets custom state 'accordion\_item\_' on the container: if current value equals item\_02, reset to 0 (close); otherwise set to item\_02 value (open) | | GP - Accordion 01 / Toggle 03 clicked | Sets custom state 'accordion\_item\_' on the container: if current value equals item\_03, reset to 0 (close); otherwise set to item\_03 value (open) | | GP - Accordion 01 / Toggle 04 clicked | Sets custom state 'accordion\_item\_' on the container: if current value equals item\_04, reset to 0 (close); otherwise set to item\_04 value (open) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 02 Source: https://docs.brikl.co/components/elements/accordions/accordion-02 Vertical accordion with three toggle rows, each featuring a title, plus icon, and collapsible content. ![Accordion 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-with-plus-minus.png) ## Overview Accordion 02 is an interactive FAQ-style component built in Bubble.io that displays three expandable/collapsible items. Each item consists of a clickable row with a bold question title and a plus icon, toggling the visibility of an answer text below. It uses custom states to track which item is open, allowing users to reveal or hide content on demand. Ideal for FAQ sections, feature explanations, or any structured Q\&A layout. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Toggle 01 Open | User clicks the first accordion row (GP - Accordion 02 / Toggle 01) | The content group for item 01 becomes visible, revealing the answer text below the title | | Toggle 01 Closed | User clicks the first accordion row again when already open | The content group for item 01 is hidden, collapsing the answer text | | Toggle 02 Open | User clicks the second accordion row (GP - Accordion 02 / Toggle 02) | The content group for item 02 becomes visible, revealing the answer text | | Toggle 02 Closed | User clicks the second accordion row again when already open | The content group for item 02 is hidden, collapsing the answer text | | Toggle 03 Open | User clicks the third accordion row (GP - Accordion 02 / Toggle 03) | The content group for item 03 becomes visible, revealing the answer text | | Toggle 03 Closed | User clicks the third accordion row again when already open | The content group for item 03 is hidden, collapsing the answer text | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - Title & Icon / Toggle 01 clicked | Sets custom state 'accordion\_item\_' on the container: if item\_01\_ equals current value, resets it to 0 (close); otherwise sets it to item\_01\_ value (open) | | GP - Title & Icon / Toggle 02 clicked | Sets custom state 'accordion\_item\_' on the container: if item\_02\_ equals current value, resets it to 0 (close); otherwise sets it to item\_02\_ value (open) | | GP - Title & Icon / Toggle 03 clicked | Sets custom state 'accordion\_item\_' on the container: if item\_03\_ equals current value, resets it to 0 (close); otherwise sets it to item\_03\_ value (open) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 03 Source: https://docs.brikl.co/components/elements/accordions/accordion-03 Vertical accordion with icons, bold titles, and collapsible text content panels, column layout. ![Accordion 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-with-icon-and-chevrons.png) ## Overview Accordion 03 is a FAQ-style accordion component featuring multiple toggle items, each with a leading icon, a bold question title, a caret indicator, and collapsible answer content. It allows users to expand or collapse individual sections to reveal descriptive text, making it ideal for FAQ sections, help centers, or informational pages in a Bubble project. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | Accordion Item Open | User clicks on a toggle group (Toggle 01, 02, 03, or 04) | The corresponding content group becomes visible and expands to show the answer text; the caret icon rotates or indicates open state | | Accordion Item Closed | User clicks an already-open toggle group | The content group collapses and hides, resetting the custom state value to 0 | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - Accordion 03 / Toggle 01 group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_01 equals current value, resets to 0; otherwise sets it to item\_01 value, toggling the first content panel | | GP - Accordion 03 / Toggle 02 group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_02 equals current value, resets to 0; otherwise sets it to item\_02 value, toggling the second content panel | | GP - Accordion 03 / Toggle 03 group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_03 equals current value, resets to 0; otherwise sets it to item\_03 value, toggling the third content panel | | GP - Accordion 03 / Toggle 04 group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_04 equals current value, resets to 0; otherwise sets it to item\_04 value, toggling the fourth content panel | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 04 Source: https://docs.brikl.co/components/elements/accordions/accordion-04 Vertical accordion with icon, title, and collapsible content panels in a clean column layout. ![Accordion 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-with-icon-and-plus-minus.png) ## Overview Accordion 04 is an interactive FAQ-style accordion component featuring multiple toggle items, each with a leading icon, a bold question title, and collapsible answer content. Clicking a toggle expands or collapses its corresponding content panel using custom states, making it ideal for FAQ sections, product details, or any structured Q\&A layout. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------ | ---------------------------------- | ----------------------------------------------------------------------------- | | Item 01 Open | User clicks the Toggle 01 group | Content panel for item 01 becomes visible; icon may switch from plus to minus | | Item 02 Open | User clicks the Toggle 02 group | Content panel for item 02 becomes visible; icon may switch from plus to minus | | Item 03 Open | User clicks the Toggle 03 group | Content panel for item 03 becomes visible; icon may switch from plus to minus | | Item 04 Open | User clicks the Toggle 04 group | Content panel for item 04 becomes visible; icon may switch from plus to minus | | Item Closed | User clicks an already-open toggle | Content panel collapses and hides; state resets to 0 | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - Title & Icon / Toggle 01 clicked | Sets custom state accordion\_item\_ on the container: if item\_01\_ equals current value, resets to 0, otherwise sets to item\_01\_ value to toggle open | | GP - Title & Icon / Toggle 02 clicked | Sets custom state accordion\_item\_ on the container: if item\_02\_ equals current value, resets to 0, otherwise sets to item\_02\_ value to toggle open | | GP - Title & Icon / Toggle 03 clicked | Sets custom state accordion\_item\_ on the container: if item\_03\_ equals current value, resets to 0, otherwise sets to item\_03\_ value to toggle open | | GP - Title & Icon / Toggle 04 clicked | Sets custom state accordion\_item\_ on the container: if item\_04\_ equals current value, resets to 0, otherwise sets to item\_04\_ value to toggle open | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 05 Source: https://docs.brikl.co/components/elements/accordions/accordion-05 Vertical accordion with collapsible rows, caret icons, bold titles, and subtle dividers. ![Accordion 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-with-sub-header-and-chevron.png) ## Overview Accordion 05 is a FAQ-style accordion component featuring multiple collapsible toggle items. Each item displays a bold question title, a sub-header text, and a caret icon that indicates open/closed state. Clicking a toggle reveals or hides the answer content below. It is ideal for FAQ sections, onboarding guides, or any content that benefits from progressive disclosure. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | Item 01 Open/Closed | Click on Toggle 01 header group | Sets custom state 'accordion\_item\_' on the container; content group for item 01 shows or hides, caret icon rotates | | Item 02 Open/Closed | Click on Toggle 02 header group | Sets custom state 'accordion\_item\_' on the container; content group for item 02 shows or hides, caret icon rotates | | Item 03 Open/Closed | Click on Toggle 03 header group | Sets custom state 'accordion\_item\_' on the container; content group for item 03 shows or hides, caret icon rotates | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Toggle 01 header group - clicked | Checks if custom state 'item\_01\_' equals current value; if open sets it to 0 (closed), otherwise sets it to current item value (open) | | Toggle 02 header group - clicked | Checks if custom state 'item\_02\_' equals current value; if open sets it to 0 (closed), otherwise sets it to current item value (open) | | Toggle 03 header group - clicked | Checks if custom state 'item\_03\_' equals current value; if open sets it to 0 (closed), otherwise sets it to current item value (open) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 06 Source: https://docs.brikl.co/components/elements/accordions/accordion-06 Vertical accordion with toggle icons, question titles, sub-headers, and expandable content sections. ![Accordion 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-with-sub-header-and-plus-minus.png) ## Overview Accordion 06 is a collapsible FAQ-style component featuring multiple toggle items, each with a title, sub-header, and expandable content area. Users click on a row to expand or collapse its content. It uses custom states to track which accordion item is open, making it ideal for FAQ sections, feature explanations, or any content that benefits from a compact, expandable layout. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- | | Item Collapsed | Default state or clicking an already-open toggle | Content group is hidden and the plus icon is shown; accordion item custom state resets to 0 | | Item Expanded | User clicks a toggle row (GP - Title & Icon) | Content group becomes visible below the title row; custom state stores the active item identifier | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - Title & Icon / Toggle 01 clicked | Sets custom state 'accordion\_item\_' on the container: if item\_01 is already active, resets to 0 (collapse); otherwise sets to item\_01 value (expand) | | GP - Title & Icon / Toggle 02 clicked | Sets custom state 'accordion\_item\_' on the container: if item\_02 is already active, resets to 0 (collapse); otherwise sets to item\_02 value (expand) | | GP - Title & Icon / Toggle 03 clicked | Sets custom state 'accordion\_item\_' on the container: if item\_03 is already active, resets to 0 (collapse); otherwise sets to item\_03 value (expand) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 07 Source: https://docs.brikl.co/components/elements/accordions/accordion-07 Vertical accordion with icon, title, subtitle, and collapsible content sections separated by dividers. ![Accordion 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-with-icon-sub-header-and-chevron.png) ## Overview Accordion 07 is an interactive FAQ-style accordion component featuring multiple toggle items. Each item displays an icon, a bold question title, a subtitle, and expandable answer content. Users click on a toggle to expand or collapse the corresponding answer. It is designed for both web and mobile layouts and uses custom states to manage which accordion item is currently open. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | Accordion Item Open | User clicks on a toggle header group (e.g., Toggle 01, 02, 03, 04) | The content group below the clicked header becomes visible; if the same item is already open, it collapses by resetting the state to 0 | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - Title & Icon / Toggle 01 clicked | Sets custom state 'accordion\_item\_' on the container: if current value equals item\_01, reset to 0 (collapse); otherwise set to item\_01 value (expand) | | GP - Title & Icon / Toggle 02 clicked | Sets custom state 'accordion\_item\_' on the container: if current value equals item\_02, reset to 0 (collapse); otherwise set to item\_02 value (expand) | | GP - Title & Icon / Toggle 03 clicked | Sets custom state 'accordion\_item\_' on the container: if current value equals item\_03, reset to 0 (collapse); otherwise set to item\_03 value (expand) | | GP - Title & Icon / Toggle 04 clicked | Sets custom state 'accordion\_item\_' on the container: if current value equals item\_04, reset to 0 (collapse); otherwise set to item\_04 value (expand) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 08 Source: https://docs.brikl.co/components/elements/accordions/accordion-08 Vertical accordion with expandable items, icons, titles, sub-headers, and a copy icon button. ![Accordion 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-with-icon-sub-header-and-plus-minus.png) ## Overview Accordion 08 is a collapsible FAQ-style component featuring multiple toggle items, each with a title, sub-header text, a plus/minus icon, and a copy action button. It is designed to show or hide content panels on click, making it ideal for FAQ sections, feature explanations, or any structured expandable content layout. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------- | | Item 01 Open | User clicks on Toggle 01 header group | Content panel for item 01 becomes visible; icon may switch from plus to minus | | Item 02 Open | User clicks on Toggle 02 header group | Content panel for item 02 becomes visible; icon may switch from plus to minus | | Item 03 Open | User clicks on Toggle 03 header group | Content panel for item 03 becomes visible; icon may switch from plus to minus | | Item Collapsed | User clicks on an already open toggle item | The custom state resets to 0, collapsing the content panel and restoring the plus icon | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Toggle 01 header group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_01\_ equals current value, resets to 0 (collapse); otherwise sets to item\_01\_ value (expand) | | Toggle 02 header group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_02\_ equals current value, resets to 0 (collapse); otherwise sets to item\_02\_ value (expand) | | Toggle 03 header group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_03\_ equals current value, resets to 0 (collapse); otherwise sets to item\_03\_ value (expand) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 09 Source: https://docs.brikl.co/components/elements/accordions/accordion-09 Vertical accordion with toggle groups, caret icons, bold titles, and gray body text on white cards. ![Accordion 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-tabs-with-chevron.png) ## Overview Accordion 09 is an interactive FAQ-style accordion component built in Bubble.io. It displays multiple collapsible sections, each containing a question title and an answer text. Users can click on any accordion item to expand or collapse its content. The component uses custom states to track which item is currently open, toggling visibility accordingly. It is suitable for FAQ pages, help sections, or any content that benefits from progressive disclosure. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------ | ----------------------------------------- | -------------------------------------------------------------------------------------------- | | Item 01 Open | User clicks on Toggle 01 accordion header | The content group for accordion item 01 expands or collapses based on the custom state value | | Item 02 Open | User clicks on Toggle 02 accordion header | The content group for accordion item 02 expands or collapses based on the custom state value | | Item 03 Open | User clicks on Toggle 03 accordion header | The content group for accordion item 03 expands or collapses based on the custom state value | | Item 04 Open | User clicks on Toggle 04 accordion header | The content group for accordion item 04 expands or collapses based on the custom state value | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | Toggle 01 header group clicked | Sets custom state 'accordion\_item\_' on the container group to toggle item 01 open or closed (sets to 0 if already open, otherwise sets to item 01 value) | | Toggle 02 header group clicked | Sets custom state 'accordion\_item\_' on the container group to toggle item 02 open or closed (sets to 0 if already open, otherwise sets to item 02 value) | | Toggle 03 header group clicked | Sets custom state 'accordion\_item\_' on the container group to toggle item 03 open or closed (sets to 0 if already open, otherwise sets to item 03 value) | | Toggle 04 header group clicked | Sets custom state 'accordion\_item\_' on the container group to toggle item 04 open or closed (sets to 0 if already open, otherwise sets to item 04 value) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 10 Source: https://docs.brikl.co/components/elements/accordions/accordion-10 Vertical accordion with bordered cards, plus/minus icons, and collapsible text content panels. ![Accordion 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-tabs-with-plus-minus.png) ## Overview Accordion 10 is a FAQ-style accordion component consisting of multiple toggleable items. Each item displays a question title with a plus icon; clicking an item expands its answer content while collapsing others. It uses custom states to track which accordion panel is currently open, making it ideal for FAQ sections, onboarding guides, or any content that benefits from progressive disclosure. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------ | ---------------------------------- | -------------------------------------------------------------------------- | | Item 01 Open | User clicks Toggle 01 header group | Content group for item 01 becomes visible; icon toggles from plus to minus | | Item 02 Open | User clicks Toggle 02 header group | Content group for item 02 becomes visible; icon toggles from plus to minus | | Item 03 Open | User clicks Toggle 03 header group | Content group for item 03 becomes visible; icon toggles from plus to minus | | Item 04 Open | User clicks Toggle 04 header group | Content group for item 04 becomes visible; icon toggles from plus to minus | | Collapsed | User clicks an already-open item | Active content group collapses; custom state resets to 0 | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Toggle 01 header group – Button Clicked | Sets custom state 'accordion\_item\_' on the container: if item\_01\_ equals current value, resets to 0 (collapse); otherwise sets to item\_01\_ value (expand) | | Toggle 02 header group – Button Clicked | Sets custom state 'accordion\_item\_' on the container: if item\_02\_ equals current value, resets to 0 (collapse); otherwise sets to item\_02\_ value (expand) | | Toggle 03 header group – Button Clicked | Sets custom state 'accordion\_item\_' on the container: if item\_03\_ equals current value, resets to 0 (collapse); otherwise sets to item\_03\_ value (expand) | | Toggle 04 header group – Button Clicked | Sets custom state 'accordion\_item\_' on the container: if item\_04\_ equals current value, resets to 0 (collapse); otherwise sets to item\_04\_ value (expand) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 11 Source: https://docs.brikl.co/components/elements/accordions/accordion-11 Vertical accordion with bordered rows, caret icons, bold titles, and collapsible content sections. ![Accordion 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-table-with-chevron.png) ## Overview Accordion 11 is a vertical FAQ-style accordion component featuring multiple toggle items. Each item displays a question title with a caret-down icon and reveals an answer when clicked. The component uses custom states to track which accordion item is open, toggling visibility of content groups accordingly. It is suited for FAQ sections, help centers, or any collapsible content use case in both web and mobile Bubble apps. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------ | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | Item 01 Open | User clicks the first accordion toggle button | The content group for item 01 becomes visible and expands; if already open, it collapses back to hidden | | Item 02 Open | User clicks the second accordion toggle button | The content group for item 02 becomes visible and expands; if already open, it collapses back to hidden | | Item 03 Open | User clicks the third accordion toggle button | The content group for item 03 becomes visible and expands; if already open, it collapses back to hidden | | Item 04 Open | User clicks the fourth accordion toggle button | The content group for item 04 becomes visible and expands; if already open, it collapses back to hidden | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Toggle 01 group clicked | Sets a custom state on the container to toggle item 01 open or closed by comparing current state value and converting boolean to number | | Toggle 02 group clicked | Sets a custom state on the container to toggle item 02 open or closed by comparing current state value and converting boolean to number | | Toggle 03 group clicked | Sets a custom state on the container to toggle item 03 open or closed by comparing current state value and converting boolean to number | | Toggle 04 group clicked | Sets a custom state on the container to toggle item 04 open or closed by comparing current state value and converting boolean to number | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Accordion 12 Source: https://docs.brikl.co/components/elements/accordions/accordion-12 Vertical accordion with bordered rows, plus icon toggles, question titles, and expandable answer text. ![Accordion 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-table-with-plus-minus.png) ## Overview Accordion 12 is an interactive FAQ-style accordion component featuring multiple collapsible items. Each item displays a question title with a plus icon that, when clicked, expands to reveal an answer. It uses custom states to track which accordion item is open, toggling visibility of content panels accordingly. Ideal for FAQ sections, product details, or any structured Q\&A layout in a Bubble app. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Accordion 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------ | --------------------------------------- | --------------------------------------------------------------------------------------------- | | Item 01 Open | User clicks the Toggle 01 accordion row | Content group for item 01 becomes visible; plus icon may change; state resets if already open | | Item 02 Open | User clicks the Toggle 02 accordion row | Content group for item 02 becomes visible; state resets if already open | | Item 03 Open | User clicks the Toggle 03 accordion row | Content group for item 03 becomes visible; state resets if already open | | Item 04 Open | User clicks the Toggle 04 accordion row | Content group for item 04 becomes visible; state resets if already open | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | Toggle 01 group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_01\_ equals current value, resets to 0; otherwise sets to item\_01\_ value | | Toggle 02 group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_02\_ equals current value, resets to 0; otherwise sets to item\_02\_ value | | Toggle 03 group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_03\_ equals current value, resets to 0; otherwise sets to item\_03\_ value | | Toggle 04 group clicked | Sets custom state 'accordion\_item\_' on the container: if item\_04\_ equals current value, resets to 0; otherwise sets to item\_04\_ value | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 01 Source: https://docs.brikl.co/components/elements/alerts/alert-01 Compact warning alert bar with orange text, light yellow background, and rounded border. ![Alert 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-warning-outlined-02.png) ## Overview Alert 01 is a simple inline alert/notification component designed to display warning or informational messages to users. It features a light yellow background with an orange border and bold orange text, making it visually distinct for drawing attention. It is ideal for form validation messages, missing information notices, or any contextual user feedback that requires a subtle yet noticeable alert style. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Alert 02 Source: https://docs.brikl.co/components/elements/alerts/alert-02 Compact error alert bar with red background, bold text, and rounded border styling. ![Alert 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-error-outlined-02.png) ## Overview Alert 02 is a simple inline alert element designed to display error or warning messages to users. It features a red-tinted background with a semi-transparent red border, bold red text, and rounded corners. It is typically used to notify users of missing or invalid information in forms or workflows, and collapses automatically when hidden to avoid taking up layout space. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Alert 03 Source: https://docs.brikl.co/components/elements/alerts/alert-03 Compact green success alert banner with bold text, rounded corners, and solid border. ![Alert 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-success-outlined-02.png) ## Overview Alert 03 is a simple inline notification component designed to display informational or success messages to users. It features a light green background with a matching border and bold green text, making it visually distinct for positive feedback or status updates. The alert is fixed-width, auto-height, and collapses when hidden, making it suitable for form validation feedback or system status messages. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Alert 04 Source: https://docs.brikl.co/components/elements/alerts/alert-04 Simple single-line blue alert banner with left-aligned text and rounded border. ![Alert 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-info-outlined-02.png) ## Overview Alert 04 is a compact informational alert component styled in blue, designed to notify users of missing or important information. It features a light blue background, a semi-transparent blue border, and bold primary-colored text, making it suitable for inline form validation messages or general informational notices. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Alert 05 Source: https://docs.brikl.co/components/elements/alerts/alert-05 Floating alert banner with warning icon, message text, and close button in a row layout. ![Alert 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-warning-filled.png) ## Overview Alert 05 is a dismissible floating notification component that slides up from the bottom of the screen to display a warning message. It features a warning icon, an informational text label, and a close button. The alert automatically dismisses after 5 seconds or can be manually closed by the user. It is designed to provide non-intrusive feedback or warnings to users on both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ---------------------------------- | ---------------------------------------------------------------------------------- | | Hovered | User hovers over the close button | Close button icon color changes to a semi-transparent dark tone (rgba(11,8,9,0.6)) | | Not Clickable | Button is in a non-clickable state | Close button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | Close button (BT - Hide FG) is clicked | Animates the floating group out with a slideDownOut transition (500ms), then hides the floating group element | | Trigger button (BT - Trigger Alert 05) is clicked | Shows the floating group, animates it in with a slideUpIn transition (500ms), waits 5 seconds, then animates it out with slideDownOut (500ms) and hides it | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 06 Source: https://docs.brikl.co/components/elements/alerts/alert-06 Floating alert banner with warning icon, error message text, and a close button. ![Alert 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-error-filled.png) ## Overview Alert 06 is a floating group toast-style alert component that appears at the bottom of the screen to notify users of an error. It slides up into view automatically, remains visible for 5 seconds, then slides back down and hides. Users can also manually dismiss it by clicking the close (X) button. It is designed for non-intrusive, temporary error feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | | Hovered | User hovers over the close button | The close button icon color changes to a semi-transparent dark tone (rgba(11,8,9,0.6)) | | Not Clickable | Button is in a non-clickable state | The close button opacity is reduced to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | Close button (BT - Hide FG Alert 06) is clicked | Animates the floating group out with a slideDownOut transition (500ms), then hides it | | Trigger button (BT - Trigger Alert 06) is clicked | Shows the floating group, animates it in with slideUpIn (500ms), waits 5 seconds, then animates it out with slideDownOut (500ms) and hides it | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 07 Source: https://docs.brikl.co/components/elements/alerts/alert-07 Floating success alert with check icon, message text, and close button, anchored bottom-right. ![Alert 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-success-filled.png) ## Overview Alert 07 is a toast-style floating notification component that appears in the bottom-right corner of the screen. It displays a success message with a green check-circle icon, a short text label, and an 'X' close button. It is initially hidden and is triggered to slide up into view, auto-dismisses after 5 seconds with a slide-down animation, or can be manually closed by clicking the X button. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | | Hovered | User hovers over the close button | The close button icon color changes to a semi-transparent dark tone (rgba(11,8,9,0.6)) | | Not Clickable | Button is in a non-clickable state | The close button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Close button (BT - Hide FG Alert 07) is clicked | Animates the floating group out with a slideDownOut transition (500ms), then hides it | | Trigger button (BT - Trigger Alert 07) is clicked | Shows the floating group, animates it in with slideUpIn (500ms), pauses for 5 seconds, then animates it out with slideDownOut (500ms) and hides it | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 08 Source: https://docs.brikl.co/components/elements/alerts/alert-08 Floating alert banner with info icon, message text, and a close button, positioned bottom-right. ![Alert 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-info-filled.png) ## Overview Alert 08 is a dismissible floating notification component that appears as a toast-style alert in the bottom-right corner of the screen. It displays an informational icon, a short message, and a close button. It auto-dismisses after 5 seconds or can be manually closed by the user. A trigger button is used to show the alert with slide-in/slide-out animations. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------- | ------------------------------------- | ----------------------------------------------------------------- | | Hovered Close Button | User hovers over the close (X) button | Icon color changes to a more transparent black (rgba(11,8,9,0.6)) | | Non-clickable Close Button | Button is not clickable | Close button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | BT - Hide FG (Alert 08) is clicked | Animates the floating group out with a slideDownOut transition (500ms), then hides it | | BT - Trigger Alert 08 is clicked | Shows the floating group, animates it in with slideUpIn (500ms), waits 5 seconds, animates it out with slideDownOut (500ms), then hides it | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 09 Source: https://docs.brikl.co/components/elements/alerts/alert-09 Floating alert bar with warning icon, message text, optional link, and close button. ![Alert 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-warning-filled-with-link.png) ## Overview Alert 09 is a floating notification component that appears at the bottom of the screen to inform users of missing or important information. It features a warning icon, a descriptive text message, an optional action link, and a close (X) button that dismisses the alert with a slide-down animation. It is designed for both web and mobile interfaces and is initially hidden until triggered. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | ----------------------------------------- | -------------------------------------------------------- | | Link Hovered | User hovers over the Link button | Link button opacity reduces to 70% and underline appears | | Link Disabled | Link button is not clickable | Link button opacity reduces to 50% | | Close Button Hovered | User hovers over the close (X) button | Close button icon color changes to rgba(11,8,9,0.6) | | Close Button Disabled | Close button is not clickable | Close button opacity reduces to 50% | | Close Button Hidden on Mobile | Page width is less than or equal to 596px | Close button becomes invisible | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | BT - Hide FG (Alert 09) is clicked | Animates the floating group with a slideDownOut transition (500ms duration), then hides the floating group element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 10 Source: https://docs.brikl.co/components/elements/alerts/alert-10 Floating alert bar with warning icon, title text, optional link button, and close button. ![Alert 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-error-filled-with-link.png) ## Overview Alert 10 is a dismissible floating group alert component that appears anchored to the bottom-right of the screen. It displays a warning icon alongside an error message, an optional navigation link, and a close (X) button that animates and hides the alert when clicked. It is designed for error or informational notifications in both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | ------------------------------------------------- | -------------------------------------------------------- | | Link Hovered | User hovers over the Link button | Link button opacity reduces to 70% and underline appears | | Link Disabled | Link button is not clickable | Link button opacity reduces to 50% | | Close Button Hovered | User hovers over the close (X) button | Close button icon color changes to rgba(11,8,9,0.6) | | Close Button Disabled | Close button is not clickable | Close button opacity reduces to 50% | | Close Button Hidden on Mobile | Current page width is less than or equal to 596px | Close (X) button becomes invisible | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | BT - Hide FG (Alert 10) is clicked | Animates the floating group out with a slideDownOut transition (500ms duration), then hides the floating group element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 11 Source: https://docs.brikl.co/components/elements/alerts/alert-11 Floating bottom-right alert with success icon, title text, link button, and close button. ![Alert 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-success-filled-with-link.png) ## Overview Alert 11 is a floating notification component that appears at the bottom-right of the screen to display a success message. It includes a check-circle icon, a title label, an optional link button, and a close (X) button. It is initially hidden and slides into view to notify users of a completed action, then can be dismissed via the close button which triggers a slide-down-out animation before hiding. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------------- | ------------------------------------------------- | -------------------------------------------------------- | | Link Hovered | User hovers over the Link button | Link button opacity reduces to 70% and underline appears | | Link Not Clickable | Link button is set to non-clickable | Link button opacity reduces to 50% | | Close Button Hovered | User hovers over the close (X) button | Close button icon color changes to rgba(11,8,9,0.6) | | Close Button Not Clickable | Close button is set to non-clickable | Close button opacity reduces to 50% | | Close Button Hidden on Small Screen | Current page width is less than or equal to 596px | Close button becomes hidden | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | BT - Hide FG (Alert 11) is clicked | Animates the floating group with a slideDownOut transition (500ms duration), then hides the floating group element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 12 Source: https://docs.brikl.co/components/elements/alerts/alert-12 Floating bottom-right alert banner with icon, title text, link button, and close button. ![Alert 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-info-filled-with-link.png) ## Overview Alert 12 is a floating notification component that appears anchored to the bottom-right corner of the screen. It displays an informational message with an icon, a short title, an optional action link, and a dismiss (close) button. It is designed to provide non-intrusive contextual feedback or announcements to users, and can be hidden via a slide-down animation when the close button is clicked. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------------- | ------------------------------------------------- | ----------------------------------------------------------- | | Link Hovered | User hovers over the Link button | Link button opacity reduces to 70% and underline is applied | | Link Not Clickable | Link button is set to non-clickable | Link button opacity reduces to 50% | | Close Button Hovered | User hovers over the close (X) button | Close button icon color changes to rgba(11,8,9,0.6) | | Close Button Not Clickable | Close button is set to non-clickable | Close button opacity reduces to 50% | | Close Button Hidden on Small Screen | Current page width is less than or equal to 596px | Close button becomes invisible | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | BT - Hide FG (Alert 12) is clicked | Animates the floating group with a slideDownOut transition (500ms duration), then hides the floating group element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 13 Source: https://docs.brikl.co/components/elements/alerts/alert-13 Floating alert card with warning icon, title, description text, action button, and dismiss button. ![Alert 13](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-warning-filled-with-description-and-button.png) ## Overview Alert 13 is a dismissible floating notification component that displays a warning message requiring user action. It contains a warning icon, a title, a descriptive message, a 'Learn more' action button, and a close button. It appears anchored to the bottom-right of the screen and slides out when dismissed. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 13** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------- | ----------------------------------------------- | --------------------------------------------------------------------- | | Close Button Hovered | User hovers over the dismiss (X) button | Icon color changes to a semi-transparent dark tone (rgba(11,8,9,0.6)) | | Close Button Not Clickable | Dismiss button is in a non-clickable state | Button opacity reduces to 50% | | Mobile Hidden Close Button | Page width is less than or equal to 596px | The dismiss button is hidden | | Action Button Hovered | User hovers over the 'Learn more' action button | Button opacity reduces to 90% | | Action Button Not Clickable | Action button is in a non-clickable state | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | BT - Hide FG (Alert 13) is clicked | Animates the floating group out using a slideDownOut transition (500ms), then hides the floating group element entirely | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 14 Source: https://docs.brikl.co/components/elements/alerts/alert-14 Floating alert with warning icon, title, description text, action button, and close button. ![Alert 14](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-error-filled-with-description-and-button.png) ## Overview Alert 14 is a dismissible floating notification component designed to inform users of an error or failed request. It appears anchored to the bottom-right of the screen and contains a warning icon, a bold title, a descriptive message, a 'Learn more' action button, and a close (X) button. It is initially hidden and becomes visible when triggered, then can be dismissed via an animated slide-down-out transition. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 14** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------- | ----------------------------------------------- | --------------------------------------------------------------------- | | Close button hovered | User hovers over the hide/close button | Icon color changes to a semi-transparent dark tone (rgba(11,8,9,0.6)) | | Close button not clickable | Close button is in a non-clickable state | Close button opacity reduces to 50% | | Mobile/narrow layout | Page width is less than or equal to 596px | Close button becomes hidden | | Action button hovered | User hovers over the 'Learn more' action button | Action button opacity reduces to 90% | | Action button not clickable | Action button is in a non-clickable state | Action button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | --------------------------------------------------------------------------------------------------------- | | BT - Hide FG (Alert 14) is clicked | Animates the floating group with a slideDownOut transition (500ms), then hides the floating group element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 15 Source: https://docs.brikl.co/components/elements/alerts/alert-15 Floating success alert with icon, title, description, action button, and close button. ![Alert 15](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-success-filled-ith-description-and-button.png) ## Overview Alert 15 is a floating notification component that appears at the bottom-right of the screen to inform users of a successful action. It features a success icon, a title, a short description, an action button ('Learn more'), and a dismiss (X) button. The alert slides in and out with an animation and is hidden by default until triggered. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 15** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------- | | Close Button Hovered | User hovers over the X (hide) button | Icon color changes to a semi-transparent dark color (rgba(11,8,9,0.6)) | | Close Button Not Clickable | Close button is not clickable | Close button opacity reduces to 50% | | Close Button Hidden on Small Screen | Page width is 596px or less | Close button becomes invisible | | Action Button Hovered | User hovers over the 'Learn more' button | Action button opacity reduces to 90% | | Action Button Not Clickable | Action button is not clickable | Action button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------- | | BT - Hide FG (Alert 15) is clicked | Animates the floating group out with a slideDownOut transition (500ms), then hides the floating group element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 16 Source: https://docs.brikl.co/components/elements/alerts/alert-16 Floating alert with info icon, title, description text, action button, and close button. ![Alert 16](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-info-filled-with-description-and-button.png) ## Overview Alert 16 is a dismissible floating notification component that displays an informational message with a title, supporting description, and an action button. It appears anchored to the bottom-right of the page and can be hidden via a close (X) button, making it suitable for contextual tips, announcements, or guided prompts. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 16** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | -------------------------------------- | --------------------------------------------------------------------- | | Close Button Hovered | User hovers over the X button | Icon color changes to a semi-transparent dark tone (rgba(11,8,9,0.6)) | | Close Button Disabled | Button is not clickable | Close button opacity reduces to 50% | | Close Button Hidden on Mobile | Page width is 596px or less | Close button becomes invisible | | Action Button Hovered | User hovers over the Learn More button | Action button opacity reduces to 90% | | Action Button Disabled | Action button is not clickable | Action button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | BT - Hide FG (Alert 16) is clicked | Animates the floating group out with a slideDownOut transition (500ms duration), then hides the floating group element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Alert 17 Source: https://docs.brikl.co/components/elements/alerts/alert-17 Floating cookie consent alert with title, description, and Accept/Decline buttons in a card layout. ![Alert 17](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Alerts/alert-cookie-with-buttons.png) ## Overview Alert 17 is a cookie consent notification component displayed as a floating group. It presents users with a privacy notice titled 'We Value Your Privacy 🍪' along with a brief description, and two action buttons: 'Accept' and 'Decline'. A close (X) button allows dismissal. When dismissed, a slide-down animation hides the floating group. It is designed for bottom-of-screen placement and is suitable for GDPR or cookie policy compliance use cases. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Alert 17** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | ------------------------------------------------- | --------------------------------------------------------------------- | | Close Button Hovered | User hovers over the X (Hide FG) button | Icon color changes to a semi-transparent dark tone (rgba(11,8,9,0.6)) | | Close Button Not Clickable | Close button is set as non-clickable | Close button opacity reduces to 50% | | Close Button Hidden on Mobile | Current page width is less than or equal to 596px | Close (X) button is hidden | | Decline Button Hovered | User hovers over the Decline button | Background color changes to rgba(245,244,244,1) | | Decline Button Not Clickable | Decline button is set as non-clickable | Decline button opacity reduces to 50% | | Accept Button Hovered | User hovers over the Accept button | Accept button opacity reduces to 90% | | Accept Button Not Clickable | Accept button is set as non-clickable | Accept button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------- | --------------------------------------------------------------------------------------------------------- | | BT - Hide FG (Alert 17) is clicked | Animates the floating group with a slideDownOut transition (500ms), then hides the floating group element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Avatar 01 Source: https://docs.brikl.co/components/elements/avatars/avatar-01 Circular avatar image component displaying a square SVG profile photo with rounded styling. ![Avatar 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-simple-image-bis.png) ## Overview Avatar 01 is a simple image-based avatar component that displays a circular profile picture. It renders a default SVG avatar image inside a fully rounded group container, making it ideal for user profile representations across web and mobile interfaces. The component is self-contained, free to use, and requires no plugins or custom code. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Avatar 02 Source: https://docs.brikl.co/components/elements/avatars/avatar-02 Circular avatar with background image and centered fallback initials text overlay. ![Avatar 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-fallback-letter.png) ## Overview Avatar 02 is a circular avatar UI component that displays a profile image as the primary visual. When no image is available, it falls back to showing initials (e.g., 'KK') centered within the circle. It is part of the Avatars sub-type collection, designed for use in user profile displays, lists, or headers on both web and mobile platforms. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | The fallback initials text font size increases from 12px to 14px to improve readability on smaller screens. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Avatar 03 Source: https://docs.brikl.co/components/elements/avatars/avatar-03 Circular avatar with background photo and centered user icon fallback, minimal style. ![Avatar 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-user-icon.png) ## Overview Avatar 03 is a circular user avatar component that displays a profile photo as a background image with a fallback user icon centered inside. It is part of the Avatars component set and is designed to represent a user visually in interfaces such as headers, lists, or profile sections. The component uses a rounded group with a background image and an overlaid phosphor-style user icon. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Avatar 04 Source: https://docs.brikl.co/components/elements/avatars/avatar-04 Square avatar image with rounded corners, centered within a fixed 280x280 container. ![Avatar 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-square-image-bis.png) ## Overview Avatar 04 is a simple square avatar component that displays a user profile image in a square format with slightly rounded corners. It is designed to be used as a visual identifier for users, suitable for profile pages, cards, or lists where a square avatar style is preferred over circular ones. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Avatar 05 Source: https://docs.brikl.co/components/elements/avatars/avatar-05 Circular avatar image with a small online/offline status indicator badge overlaid. ![Avatar 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-with-online-offline-sign-bis.png) ## Overview Avatar 05 is a UI component that displays a circular user profile picture with a small colored status dot (green for online) positioned in the lower-right area of the avatar. It is designed to visually communicate a user's online or offline presence alongside their profile image, commonly used in chat apps, dashboards, or user directories. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Avatar 06 Source: https://docs.brikl.co/components/elements/avatars/avatar-06 Circular avatar image with a blue certified/verified seal icon overlaid at bottom-right corner. ![Avatar 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-certified-sign-bis.png) ## Overview Avatar 06 is a circular profile picture component featuring a user avatar image with a blue phosphor 'seal-check' verified badge icon positioned at the bottom-right. It is designed to visually indicate that a user or profile is certified or verified, commonly used in social platforms, directories, or user profile sections. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Avatar 07 Source: https://docs.brikl.co/components/elements/avatars/avatar-07 Circular avatar image with a dark badge showing a number, positioned at the top-right corner. ![Avatar 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-with-number-bis.png) ## Overview Avatar 07 is a UI component that displays a circular profile picture with an overlapping notification badge in the top-right corner. The badge is a small dark circle with white text showing a count number, making it ideal for displaying unread counts, notifications, or group member numbers alongside a user avatar. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | Mobile Responsive | Current page width is less than the built-in mobile breakpoint | The badge number text size increases from 12px to 14px for better readability on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Avatar 08 Source: https://docs.brikl.co/components/elements/avatars/avatar-08 Horizontal row of four overlapping circular avatar images with white borders. ![Avatar 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-multiple-images-bis.png) ## Overview Avatar 08 is a stacked avatar group component that displays four circular profile images arranged in a horizontal row with a slight overlap effect. Each avatar has a white border and uses SVG placeholder images. It is ideal for showing team members, participants, or social connections in a compact, visually appealing format. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Avatar 09 Source: https://docs.brikl.co/components/elements/avatars/avatar-09 Horizontal overlapping circular avatars row with a count badge, white borders, light background. ![Avatar 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-multiple-image-with-number-last-bis.png) ## Overview Avatar 09 is a stacked avatar group component that displays four circular profile images overlapping horizontally, followed by a fifth circle showing a '+3' count indicator. It is used to visually represent a group of users or participants in a compact, elegant format, commonly seen in team displays, social features, or collaboration tools. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------- | | Mobile font size | Current page width is less than the built-in mobile breakpoint | The '+3' count text font size reduces to 14px for better readability on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Avatar 10 Source: https://docs.brikl.co/components/elements/avatars/avatar-10 Overlapping circular avatar stack with four profile images and a count badge, arranged in a row. ![Avatar 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-with-multiple-image-with-number-with-image-bis.png) ## Overview Avatar 10 is a stacked avatar group component that displays four circular profile images overlapping each other horizontally, followed by a circular badge showing the number of additional users (e.g., '+3'). It is ideal for representing a group of users, team members, or social connections in a compact, visually appealing format. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------- | | Mobile font size | Current page width is less than the built-in mobile breakpoint | The count badge text font size reduces to 14px for better fit on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Avatar 11 Source: https://docs.brikl.co/components/elements/avatars/avatar-11 Horizontal overlapping circular avatars row with a count badge, bordered and shadowed. ![Avatar 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-with-multiple-image-with-number-with-last-image-and%20white-background-bis.png) ## Overview Avatar 11 is a stacked avatar group component displaying four circular profile images overlapping horizontally, followed by a count indicator (e.g., '+3') in a neutral-colored circle. It is used to visually represent multiple users or participants in a compact, modern format, commonly seen in team displays, social proof sections, or collaboration features. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------- | | Mobile font size | Current page width is less than the built-in mobile breakpoint | The count text font size reduces to 14px for better fit on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Avatar 12 Source: https://docs.brikl.co/components/elements/avatars/avatar-12 Horizontal overlapping avatar stack with a text label showing social proof on a pill-shaped container. ![Avatar 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Avatars/avatar-with-multiple-image-with-text-bis.png) ## Overview Avatar 12 is a social proof UI component that displays a horizontal stack of four overlapping circular avatar images followed by a text label reading 'Trusted by 60K+ Developers.' The avatars overlap using negative left margins and increasing z-indexes, and the entire group is wrapped in a rounded pill-shaped container with a subtle shadow and border. It is designed to build trust and credibility on landing pages or marketing sections. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Avatar 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | Mobile font size | Current page width is less than the built-in mobile breakpoint | The text element inside GP - Text reduces its font size from 12 to 14 (responsive adjustment for mobile screens) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 01 Source: https://docs.brikl.co/components/elements/badges/badge-01 A horizontal row of 8 colorful badge labels with rounded corners and subtle borders. ![Badge 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-border.png) ## Overview Badge 01 is a UI component containing 8 pre-styled badge variants, each displaying a short label text in a distinct color scheme (Grey, Red, Yellow, Green, Blue, Palatinate Blue, Purple, and Pink). These badges are commonly used to indicate status, categories, or tags within an interface, offering a consistent and visually distinct set of options for labeling content. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Badge 02 Source: https://docs.brikl.co/components/elements/badges/badge-02 A row of eight pill-shaped badges in varied colors: grey, red, yellow, green, blue, indigo, purple, and pink. ![Badge 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-border-rounded.png) ## Overview Badge 02 is a collection of eight styled pill-shaped text badge elements, each representing a distinct color variant (Grey, Red, Yellow, Green, Blue, Palatinate Blue, Purple, and Pink). These badges are arranged in a horizontal row layout with consistent padding, font styling, and rounded borders, making them ideal for use as status indicators, tags, labels, or category markers across web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Badge 03 Source: https://docs.brikl.co/components/elements/badges/badge-03 A horizontal row of 8 colorful badge text elements with rounded corners and pastel backgrounds. ![Badge 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-no-border.png) ## Overview Badge 03 is a UI component featuring a collection of 8 styled badge labels, each in a distinct color variant (Grey, Red, Yellow, Green, Blue, Palatinate Blue, Purple, and Pink). These badges are arranged in a wrapping row layout within a container and are commonly used to display status indicators, tags, categories, or labels throughout an application interface. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Badge 04 Source: https://docs.brikl.co/components/elements/badges/badge-04 A row of eight colorful pill-shaped badge labels in various color themes. ![Badge 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-no-border-rounded.png) ## Overview Badge 04 is a UI component featuring eight pill-shaped text badges, each styled in a distinct color variant: Grey, Red, Yellow, Green, Blue, Palatinate Blue, Purple, and Pink. It is designed to visually categorize or label content using color-coded indicators. The badges are arranged in a horizontal wrapping row layout with consistent padding, font styling, and rounded corners, making them suitable for status indicators, tags, or category labels in both web and mobile applications. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Badge 05 Source: https://docs.brikl.co/components/elements/badges/badge-05 Row of colored dismissible badge pills (grey, red, yellow) with text and close buttons. ![Badge 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-border-and-remove-button.png) ## Overview Badge 05 is a UI component featuring a set of dismissible badge pills in multiple color variants (grey, red, and yellow). Each badge contains a label text and an 'X' icon button to remove it. The badges use a horizontal row layout with rounded borders, colored backgrounds, and matching icon colors per variant. This component is ideal for tag inputs, filter chips, or label displays where users can remove individual items. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------------ | ----------------------------------------- | ------------------------------------------------- | | Hovered - Grey Remove Button | Mouse hover on grey badge remove button | Background color changes to rgba(106,114,130,0.2) | | Not Clickable - Grey Remove Button | Button is set to not clickable | Opacity reduces to 50% | | Hovered - Red Remove Button | Mouse hover on red badge remove button | Background color changes to rgba(231,0,11,0.2) | | Not Clickable - Red Remove Button | Button is set to not clickable | Opacity reduces to 50% | | Hovered - Yellow Remove Button | Mouse hover on yellow badge remove button | Background color changes to rgba(208,135,0,0.2) | | Not Clickable - Yellow Remove Button | Button is set to not clickable | Opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 06 Source: https://docs.brikl.co/components/elements/badges/badge-06 Horizontal row of colored dismissible badge pills in grey, red, and yellow variants. ![Badge 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-no-border-and-remove-button.png) ## Overview Badge 06 is a UI component featuring a set of removable badge/tag elements in multiple color variants (grey, red, and yellow). Each badge contains a text label and an 'X' icon button to dismiss or remove the badge. It is designed for use in tagging, filtering, or labeling scenarios where users need to visually identify and optionally remove categorized items. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------- | ------------------------------------------------- | ------------------------------------------------- | | Hovered - Grey Remove Button | User hovers over the grey badge's remove button | Background color changes to rgba(106,114,130,0.2) | | Disabled - Grey Remove Button | Grey remove button is not clickable | Opacity reduces to 50% | | Hovered - Red Remove Button | User hovers over the red badge's remove button | Background color changes to rgba(231,0,11,0.2) | | Disabled - Red Remove Button | Red remove button is not clickable | Opacity reduces to 50% | | Hovered - Yellow Remove Button | User hovers over the yellow badge's remove button | Background color changes to rgba(208,135,0,0.2) | | Disabled - Yellow Remove Button | Yellow remove button is not clickable | Opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 07 Source: https://docs.brikl.co/components/elements/badges/badge-07 A row of five colored dot-label badge variants: grey, red, yellow, green, and blue. ![Badge 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-no-border-and-dot.png) ## Overview Badge 07 is a collection of five pill-shaped status badge components, each featuring a small colored circular dot paired with a 'Badge' label. The variants cover common semantic states—grey (neutral), red (error/danger), yellow (warning), green (success), and blue (info)—making it suitable for status indicators, tags, or labels in dashboards, tables, and lists. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 08 Source: https://docs.brikl.co/components/elements/badges/badge-08 Row of five colored dot-prefix badges (grey, red, yellow, green, blue) with pill-shaped containers. ![Badge 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-no-border-and-dot-rounded.png) ## Overview Badge 08 is a UI component featuring five status badge variants, each consisting of a small colored dot icon followed by a 'Badge' label text. The badges come in five color themes: grey, red, yellow, green, and blue, each with matching background fill and text color, styled as pill-shaped (fully rounded) inline containers. This component is ideal for displaying status indicators, tags, or category labels in a visually distinct and color-coded manner. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 09 Source: https://docs.brikl.co/components/elements/badges/badge-09 Row-layout white badges with colored dot indicators (grey, red, yellow, green, blue) and text label. ![Badge 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-white-with-border-and-dot.png) ## Overview Badge 09 is a collection of status badge components, each featuring a small colored circular dot indicator paired with a text label on a white background with a light border. The badges come in five color variants (grey, red, yellow, green, and blue dots) to visually communicate different statuses or categories, making them ideal for tagging, labeling, or status indication in dashboards, lists, or data tables. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 10 Source: https://docs.brikl.co/components/elements/badges/badge-10 Row-layout white badges with colored dot indicators (grey, red, yellow, green, blue) and text label. ![Badge 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-white-with-border-and-dot-rounded.png) ## Overview Badge 10 is a collection of pill-shaped white badge components, each featuring a small colored circular dot indicator alongside a text label. The badges come in five dot color variants — grey, red, yellow, green, and blue — making them suitable for status indicators, tags, or category labels in both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 11 Source: https://docs.brikl.co/components/elements/badges/badge-11 A horizontal row of eight color-coded badge labels with rounded borders and light backgrounds. ![Badge 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-small-with-border.png) ## Overview Badge 11 is a UI component from the Badges collection that displays eight styled text badge variants, each in a distinct color theme (Grey, Red, Yellow, Green, Blue, Palatinate Blue, Purple, and Pink). These badges are designed to visually categorize or label content using subtle background colors, matching border accents, and colored text. The component is built as a responsive row container with consistent padding and gap spacing, suitable for status indicators, tags, or category labels across web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 12 Source: https://docs.brikl.co/components/elements/badges/badge-12 Row of 8 colorful pill-shaped badge labels with distinct background and text color combinations. ![Badge 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-small-with-border-rounded.png) ## Overview Badge 12 is a UI component featuring a horizontal row of eight pill-shaped badge elements, each styled in a different color theme (Grey, Red, Yellow, Green, Blue, Palatinate Blue, Purple, and Pink). It is designed to visually categorize, label, or tag content items with semantic color coding, making it ideal for status indicators, tags, or classification labels in web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 13 Source: https://docs.brikl.co/components/elements/badges/badge-13 A horizontal row of 8 colorful badge labels in rounded pill-style containers with varied background colors. ![Badge 13](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-small-with-no-border.png) ## Overview Badge 13 is a UI component that displays a collection of 8 styled text badges, each in a distinct color variant (Grey, Red, Yellow, Green, Blue, Palatinate Blue, Purple, and Pink). It is designed to visually categorize or label content using color-coded indicators, commonly used for status tags, category labels, or filter chips in web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 13** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 14 Source: https://docs.brikl.co/components/elements/badges/badge-14 A horizontal row of eight colorful pill-shaped badge labels in various color variants. ![Badge 14](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-small-with-no-border-rounded.png) ## Overview Badge 14 is a UI component from the Badges sub-type collection that displays eight pre-styled pill-shaped text badges, each in a distinct color variant: Grey, Red, Yellow, Green, Blue, Palatinate Blue, Purple, and Pink. It is designed to be used for status indicators, labels, tags, or category markers within an application. Each badge features a soft background color, a matching font color, rounded corners, and no border, creating a clean and modern look suitable for dashboards, lists, or card components. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 14** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 15 Source: https://docs.brikl.co/components/elements/badges/badge-15 Row-layout badge group with colored dot indicators and text labels in five color variants. ![Badge 15](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-small-with-no-border-and-dot.png) ## Overview Badge 15 is a UI component from the Badges sub-type collection that displays small status or category badges, each consisting of a circular dot indicator paired with a text label. It comes in five color variants: Grey, Red, Yellow, Green, and Blue, making it suitable for indicating statuses, categories, or tags within an application interface. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 15** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 16 Source: https://docs.brikl.co/components/elements/badges/badge-16 A row of colored badge pills, each with a dot indicator and label text, in multiple color variants. ![Badge 16](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-small-with-no-border-and-dot-rounded.png) ## Overview Badge 16 is a UI component from the Badges sub-type collection that displays small status badge pills in five color variants: Grey, Red, Yellow, Green, and Blue. Each badge consists of a colored circular dot indicator paired with a text label, styled with matching background and text colors. These badges are typically used to communicate status, category, or classification at a glance in dashboards, tables, or list views. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 16** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 17 Source: https://docs.brikl.co/components/elements/badges/badge-17 Row-layout badge components with circular image and text label in multiple color variants. ![Badge 17](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-border-and-image-rounded.png) ## Overview Badge 17 is a collection of pill-shaped badge components, each combining a circular logo/image with a short text label. Available in multiple color variants (Grey, Yellow, Green, Blue, and more), these badges are designed to visually categorize, tag, or highlight content. They are suitable for status indicators, category tags, or achievement labels across both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 17** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 18 Source: https://docs.brikl.co/components/elements/badges/badge-18 Circular badge component with logo image and text label in five color variants arranged in a row. ![Badge 18](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-with-no-border-and-image-rounded.png) ## Overview Badge 18 is a UI component from the Badges sub-type collection that displays a circular badge combining a logo image and a short text label. It comes in five color variants: Grey, Red, Yellow, Green, and Blue. Each badge uses a pill/circle-shaped container with a colored background, a rounded logo image on the left, and a colored label text on the right. It is designed for use as status indicators, tags, or category labels across both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 18** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 19 Source: https://docs.brikl.co/components/elements/badges/badge-19 Horizontal badge strip with colored pill label and arrow icon in three color variants. ![Badge 19](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-group-with-badge-inside.png) ## Overview Badge 19 is a compact announcement banner component featuring three color variants (grey, red, yellow). Each variant contains a rounded pill-style badge label (e.g. 'Version 1.0') followed by a short descriptive text and a directional arrow icon. It is designed to highlight new features or announcements at the top of a page or section. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 19** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Badge 20 Source: https://docs.brikl.co/components/elements/badges/badge-20 Horizontal badge group with icon, label text, and close button in pill-shaped containers. ![Badge 20](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Badges/badges-status-badge.png) ## Overview Badge 20 is a status badge component from the Badges sub-type collection. It displays multiple pill-shaped badges, each containing a leading status icon, a descriptive label, and a dismissible close icon. The badges are designed to communicate feature or status states such as 'Protection', 'Live', and 'Safety checks', making them ideal for dashboards, feature lists, or permission indicators. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Badge 20** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ----------------------------------------------- | ------------------------------------------------------------------------------ | | Active / Success | Default render for active or enabled status | Green shield-check or check-circle icon is displayed alongside the badge label | | Error / Inactive | Status indicates a failed or inactive condition | Red x-circle icon is displayed alongside the badge label | | Dismissible | Close icon (x-circle) is present in each badge | A grey x-circle icon appears on the right side of the badge to allow removal | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Breadcrumb 01 Source: https://docs.brikl.co/components/elements/breadcrumbs/breadcrumb-01 Horizontal breadcrumb navigation with three links and caret-right separator icons in a row layout. ![Breadcrumb 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Breadcrumbs/breadcrumb-text.png) ## Overview Breadcrumb 01 is a horizontal navigation component that displays a three-level page hierarchy (Home > Components > Breadcrumb). It uses Link elements separated by caret-right icons to help users understand their current location within the application and navigate back to parent pages. The final item is styled differently to indicate the current active page. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Breadcrumb 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ------------------------------------ | ----------------------------------------------------------------- | | Not Clickable | Element is marked as not clickable | Link opacity reduces to 25%, making it appear dimmed and inactive | | Hovered (Home) | User hovers over the Home link | Font color changes to dark rgba(11, 8, 9, 1) | | Hovered (Components) | User hovers over the Components link | Font color changes to dark rgba(11, 8, 9, 1) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Breadcrumb 02 Source: https://docs.brikl.co/components/elements/breadcrumbs/breadcrumb-02 Horizontal breadcrumb navigation with icons, caret separators, and three labeled link buttons. ![Breadcrumb 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Breadcrumbs/breadcrumb-text-and-icon-02.png) ## Overview Breadcrumb 02 is a horizontal navigation component that displays a multi-level breadcrumb trail. It consists of three clickable button items (Home, Components, Breadcrumb) each paired with an icon, separated by caret-right icons. The active/current page item is styled with a darker color and medium font weight, while previous navigation items appear in a muted gray tone with hover state color changes. It is designed for web interfaces to help users understand their current location within a site hierarchy. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Breadcrumb 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------- | | Hovered | Mouse hover over BT - Home or BT - Components buttons | Font color and icon color change to dark near-black rgba(11,8,9,1) | | Not Clickable | Button is set to non-clickable | Opacity of the button reduces to 50%, indicating a disabled or inactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Breadcrumb 03 Source: https://docs.brikl.co/components/elements/breadcrumbs/breadcrumb-03 Horizontal breadcrumb with home icon, caret separators, and text links in a row layout. ![Breadcrumb 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Breadcrumbs/breadcrumb-home-icon.png) ## Overview Breadcrumb 03 is a horizontal navigation breadcrumb component that displays a home icon, followed by caret-right separators and clickable text links (e.g., 'Components' and 'Breadcrumb'). It helps users understand their location within a website hierarchy and navigate back to previous sections. The current page label is styled with a darker, bolder font while ancestor links appear muted with hover effects. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Breadcrumb 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------ | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | Home Icon Hovered | Mouse hover over the home icon element | Icon color transitions from semi-transparent gray (rgba(113,113,123,0.7)) to dark (rgba(11,8,9,1)) with a 200ms ease transition | | Link Hovered | Mouse hover over the 'Components' link | Font color changes to dark (rgba(11,8,9,1)) from muted gray | | Link Not Clickable | Link is set to not clickable | Opacity of the link drops to 25%, indicating it is disabled | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Breadcrumb 04 Source: https://docs.brikl.co/components/elements/breadcrumbs/breadcrumb-04 Horizontal breadcrumb navigation with home icon, caret separators, and styled text links. ![Breadcrumb 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Breadcrumbs/breadcrumb-filled.png) ## Overview Breadcrumb 04 is a horizontal navigation component that displays a multi-level breadcrumb trail. It includes a home icon as the root, caret-right separators, and clickable text links for intermediate and current page labels. The current page ('Breadcrumb') is styled with a darker, bolder font to indicate active state, while previous links use a muted color with hover effects that darken them on interaction. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Breadcrumb 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | Home Icon Hovered | Mouse hover over the home icon element | Icon color transitions from semi-transparent gray (rgba(113,113,123,0.7)) to near-black (rgba(11,8,9,1)) with a 200ms ease transition | | Components Link Hovered | Mouse hover over the 'Components' link element | Font color changes from muted gray (rgba(113,113,123,1)) to near-black (rgba(11,8,9,1)) | | Components Link Not Clickable | Link is set to not clickable | Opacity of the 'Components' link reduces to 25% | | Breadcrumb Link Not Clickable | Link is set to not clickable | Opacity of the 'Breadcrumb' link reduces to 25% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Button 01 Source: https://docs.brikl.co/components/elements/buttons/button-01 Centered dark button with icon, rounded corners, bold label, and subtle shadow. ![Button 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-simple.png) ## Overview Button 01 is a simple, styled call-to-action button element for Bubble.io. It features a dark background, white text, a Material outlined star icon, and a soft box shadow. It supports hover and disabled states with opacity transitions, making it suitable for primary actions across both web and mobile layouts. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------- | ------------------------------------------------------------------- | | Hovered | Element is hovered by the user | Opacity reduces to 90%, providing a subtle visual feedback on hover | | Not Clickable | Element is set to not clickable | Opacity reduces to 50%, visually indicating a disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 02 Source: https://docs.brikl.co/components/elements/buttons/button-02 Single dark-background button with star icon, rounded corners, and disabled state styling. ![Button 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-disable.png) ## Overview Button 02 is a styled action button component designed for both web and mobile use. It features a dark background with white text and a star icon, supporting hover and disabled states with opacity changes. The button is fully responsive with fit-width and fit-height enabled, and includes smooth background transition animations. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------------------------------- | ------------------------------------------------------------------ | | Hovered | User hovers over the button | Opacity reduces to 90%, providing visual hover feedback | | Disabled | Button is not clickable (isnt\_clickable condition met) | Opacity reduces to 50%, visually indicating the button is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 03 Source: https://docs.brikl.co/components/elements/buttons/button-03 Fully rounded, dark-filled button with icon and centered label on a flexible layout. ![Button 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-rounded-full.png) ## Overview Button 03 is a fully pill-shaped (border-radius 100) call-to-action button featuring a leading star icon and a text label. It uses a dark background with white text and supports hover and disabled states via opacity changes. The button is responsive with fit-width and fit-height enabled, minimum dimensions enforced, and smooth background transition on interaction. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------- | ------------------------------------------------------------ | | Hovered | Element is hovered by the user | Opacity reduces to 90%, providing a subtle dimming feedback | | Not Clickable | Element is set to not clickable | Opacity reduces to 50%, visually indicating a disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 04 Source: https://docs.brikl.co/components/elements/buttons/button-04 Dark rounded button with icon and label, centered layout, minimal style. ![Button 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-with-icon.png) ## Overview Button 04 is a styled call-to-action button element featuring both a text label and an icon (Phosphor Light Copy). It is designed for web and mobile interfaces with a dark background, white text, and smooth hover/disabled state transitions. The button supports responsive sizing with minimum width and height constraints, making it versatile for primary actions across various UI contexts. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------ | ------------------------------------------------------------------------------ | | Hovered | User hovers over the button | Opacity reduces to 90%, providing subtle visual feedback on hover | | Disabled / Not Clickable | Button is set to not clickable | Opacity reduces to 50%, visually indicating the button is inactive or disabled | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 05 Source: https://docs.brikl.co/components/elements/buttons/button-05 Red destructive button with trash icon and label, rounded corners, centered layout. ![Button 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-destructive-with-icon.png) ## Overview Button 05 is a destructive action button designed to indicate dangerous or irreversible actions such as deletion. It features a bold red background with a trash icon alongside a text label, making it visually distinct from standard buttons. It supports hover and disabled states with opacity changes, and is fully responsive with flexible width and height settings. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------ | -------------------------------------------------------------------- | | Hovered | User hovers over the button | Button opacity reduces to 90%, providing visual hover feedback | | Disabled / Not Clickable | Button is set to not clickable | Button opacity reduces to 50%, indicating it is inactive or disabled | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 06 Source: https://docs.brikl.co/components/elements/buttons/button-06 Secondary button with icon and label, rounded corners, light background, and subtle border. ![Button 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-secondary.png) ## Overview Button 06 is a secondary-style button component featuring a label and an icon (phosphor bold squares-four). It is designed for secondary actions in a UI, with a clean white background, subtle border, and soft box shadow. It supports hover and disabled states with smooth transitions, and is fully responsive for both web and mobile platforms. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | --------------------------------------- | --------------------------------------------------------------------- | | Hovered | User hovers over the button | Background color changes to rgba(245, 244, 244, 1), a light gray tint | | Not Clickable | Button is set as non-clickable/disabled | Opacity reduces to 50%, visually indicating the button is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 07 Source: https://docs.brikl.co/components/elements/buttons/button-07 Outlined button with label and icon, rounded corners, light background, center-aligned. ![Button 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-outline.png) ## Overview Button 07 is a versatile outline-style button component featuring a text label paired with an icon. It supports hover and disabled states with opacity transitions, making it suitable for secondary actions in both web and mobile interfaces. The button is fully responsive with configurable padding, minimum dimensions, and fluid sizing options. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | -------------------------------------------- | -------------------------------------------------------- | | Hovered | User hovers over the button | Button opacity reduces to 80% | | Not Clickable | Button is set to non-interactive or disabled | Button opacity reduces to 50%, indicating it is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 08 Source: https://docs.brikl.co/components/elements/buttons/button-08 Ghost-style button with left arrow icon and label, featuring hover and disabled states. ![Button 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-ghost.png) ## Overview Button 08 is a ghost-style button component designed for both web and mobile interfaces. It features a transparent background with a visible border on interaction, an arrow-left icon paired with a text label, and smooth hover transitions. It is ideal for secondary or navigation actions where a subtle, non-filled button style is preferred. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------- | ------------------------------------------------------------------------- | | Hovered | User hovers over the button | Background color changes to rgba(245,244,244,1), giving a light gray fill | | Disabled | Button is not clickable | Opacity is reduced to 50%, visually indicating the button is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 09 Source: https://docs.brikl.co/components/elements/buttons/button-09 Rounded full icon-only button with border, shadow, and hover/disabled states. ![Button 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-icon-rounded-full.png) ## Overview Button 09 is a compact, icon-only button with a fully rounded (pill/circle) shape designed for toolbars, action bars, or floating controls. It displays a single icon (default: plus from Phosphor Bold) without visible text, making it ideal for minimal UI designs where space is limited. It supports hover and disabled states with smooth background transitions. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------ | --------------------------------------------------------------------- | | Hovered | User hovers over the button | Background color changes to rgba(245, 244, 244, 1), a light gray tint | | Disabled / Not Clickable | Button is set to not clickable | Opacity reduces to 50%, visually indicating the button is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 10 Source: https://docs.brikl.co/components/elements/buttons/button-10 Horizontal row group with a Cancel button and a Save button, side by side. ![Button 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-cancel-and-save.png) ## Overview Button 10 is a 'Cancel & Save' action bar component containing two buttons arranged in a horizontal row. The Cancel button uses a light/outlined style with a left-arrow icon, while the Save button uses a dark filled style with a star icon. It is designed for form confirmation flows where users can either discard or commit their changes. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------- | ------------------------------------- | ------------------------------------------------------------------- | | Cancel Button Hovered | User hovers over the Cancel button | Background color changes to rgba(245,244,244,1) — a light gray tint | | Cancel Button Not Clickable | Cancel button is set to not clickable | Opacity reduces to 50%, visually dimming the button | | Save Button Hovered | User hovers over the Save button | Opacity reduces to 90%, slightly dimming the dark background | | Save Button Not Clickable | Save button is set to not clickable | Opacity reduces to 50%, visually dimming the button | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Button 11 Source: https://docs.brikl.co/components/elements/buttons/button-11 Dark pill-shaped button with circular avatar image and white username text side by side. ![Button 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-with-image-and-text.png) ## Overview Button 11 is a social-style button component that combines a circular avatar image with a username label, displayed in a dark rounded pill container. It is designed to represent a user profile action button, ideal for follow buttons, user mentions, or profile links in social or community-driven applications. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------- | ----------------------------------- | -------------------------------------------------------------------------------- | | Hovered | User hovers over the button element | The group's opacity reduces to 90%, providing a subtle dimming feedback on hover | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 12 Source: https://docs.brikl.co/components/elements/buttons/button-12 Circular avatar image paired with a caret-down icon arranged in a horizontal row layout. ![Button 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-with-image-and-icon.png) ## Overview Button 12 is a compact interactive button component featuring a circular user avatar image alongside a downward-pointing caret icon. It is designed to serve as a profile or account menu trigger, commonly used in navigation bars or headers to open dropdown menus. The horizontal row layout with centered alignment makes it intuitive for users to interact with. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 13 Source: https://docs.brikl.co/components/elements/buttons/button-13 Rounded icon button with a dark notification badge overlay showing a count of 3. ![Button 13](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-notifications.png) ## Overview Button 13 is a notification bell icon button component that displays a circular badge with a count indicator. It consists of a rounded white button featuring a bell-ringing icon and an overlaid dark badge showing the number of unread notifications. It is designed for use in navigation bars or headers to alert users of pending notifications. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 13** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------ | --------------------------------------------------------------------- | | Hovered | User hovers over the button | Background color changes to rgba(245, 244, 244, 1), a light gray tint | | Disabled / Not Clickable | Button is set to not clickable | Button opacity reduces to 50%, visually dimming the element | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 14 Source: https://docs.brikl.co/components/elements/buttons/button-14 Horizontal row of four icon-only social buttons (Facebook, Google, Github, X/Twitter) with border styling. ![Button 14](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-social-icons.png) ## Overview Button 14 is a social icons button group component containing four individual icon-only buttons for Facebook, Google, GitHub, and X (Twitter). Each button features a white background with a subtle border, box shadow, and hover state that transitions to a light gray background. The buttons are arranged in a horizontal row with 8px gaps, making it ideal for social login or social media link sections in web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 14** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | Hovered | User hovers over any individual social button | Button background color transitions from white to light gray (rgba(245, 244, 244, 1)) with an ease animation of 200ms | | Disabled / Not Clickable | Button is set to not clickable | Button opacity reduces to 50%, visually indicating it is inactive or disabled | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 15 Source: https://docs.brikl.co/components/elements/buttons/button-15 Vertical stack of four branded social login buttons (Facebook, Google, X, GitHub) with icons. ![Button 15](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-social-icons-and-text.png) ## Overview Button 15 is a social authentication button group component containing four styled login buttons for Facebook, Google, X (Twitter), and GitHub. Each button features a brand-specific background color, a Bootstrap icon, and a label, arranged in a vertical column layout. It is designed for login or sign-up flows where users can authenticate via third-party social providers. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 15** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | -------------------------------------- | ----------------------------- | | Hovered | User hovers over any individual button | Button opacity reduces to 90% | | Disabled / Not Clickable | Button is set to not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 16 Source: https://docs.brikl.co/components/elements/buttons/button-16 Horizontal button group with three segmented buttons (Left, Center, Right) in a row layout. ![Button 16](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-groups-with-text-only.png) ## Overview Button 16 is a segmented button group component containing three connected buttons labeled Left, Center, and Right. It is designed to function as a button group with visually joined borders, where the leftmost button has rounded left corners, the center button has no rounded corners, and the rightmost button has rounded right corners. This component is ideal for toggle selections, tab-like navigation, or grouped action controls in both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 16** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------ | ---------------------------------------------------------------------------- | | Hovered | Mouse hovers over a button | Button background color changes to rgba(245, 244, 244, 1), a light gray tint | | Not Clickable | Button is set to non-clickable | Button opacity reduces to 50%, indicating a disabled appearance | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 17 Source: https://docs.brikl.co/components/elements/buttons/button-17 Horizontal button group with three icon-label buttons: Files, Media, and Settings, styled with borders. ![Button 17](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-groups-with-text-and-icon.png) ## Overview Button 17 is a horizontal button group component containing three segmented buttons (Files, Media, Settings), each with a phosphor icon and label. The buttons are visually connected with shared borders and rounded corners only on the outer edges, creating a cohesive toolbar-style control. It is suitable for navigation tabs, filter selectors, or action groups in both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 17** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------------------------------- | ---------------------------------------------------------------------- | | Hovered | User hovers over any button | Button background changes to rgba(245, 244, 244, 1), a light grey tint | | Disabled | Button is not clickable (isnt\_clickable condition) | Button opacity reduces to 50%, visually indicating it is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 18 Source: https://docs.brikl.co/components/elements/buttons/button-18 Horizontal button group with three icon-only buttons (Files, Media, Settings) in a row layout. ![Button 18](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-groups-with-icon-only.png) ## Overview A segmented button group component containing three icon-only buttons arranged horizontally in a row. The buttons represent common actions — Files, Media, and Settings — each using Phosphor Bold icons. The group uses connected border styling where the first button has rounded left corners, the middle button has no rounding, and the last button has rounded right corners, creating a unified toolbar appearance. Suitable for navigation tabs, filter selectors, or action toolbars. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 18** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------ | | Hovered | Mouse hover over any button | Button background color changes to rgba(245, 244, 244, 1) with an ease transition of 200ms | | Disabled | Button is not clickable (isnt\_clickable condition) | Button opacity reduces to 50%, indicating a non-interactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 19 Source: https://docs.brikl.co/components/elements/buttons/button-19 Horizontal row group with up/down caret buttons flanking a centered numeric input field. ![Button 19](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-with-input-count.png) ## Overview Button 19 is a numeric counter/stepper component featuring two icon buttons (up and down carets) surrounding a disabled numeric input field. It is designed to allow users to increment or decrement a count value, commonly used in quantity selectors, order forms, or any UI requiring numeric input control. The input displays the current count value and is styled to blend seamlessly between the two flanking buttons. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 19** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------ | ----------------------------------------------------------------------------------------- | | Hovered | Mouse hover over Up or Down button | Button background color changes to rgba(245, 244, 244, 1), giving a subtle gray highlight | | Not Clickable | Button is set to non-clickable state | Button opacity reduces to 50%, visually indicating it is disabled or unavailable | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 20 Source: https://docs.brikl.co/components/elements/buttons/button-20 Black rounded button group with up/down caret buttons and a centered numeric input field. ![Button 20](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-with-input-count-black-rounded-full.png) ## Overview Button 20 is a stepper/counter UI component featuring two icon buttons (up and down carets) flanking a disabled numeric input field. It allows users to increment or decrement a count value, styled in a dark black rounded pill design with white icons. Commonly used for quantity selectors, counters, or numeric input controls. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 20** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------- | | Hovered | User hovers over the Up or Down button | Button opacity reduces to 90%, providing a subtle visual hover feedback | | Disabled/Not Clickable | Button is set to not clickable (isnt\_clickable condition) | Button opacity reduces to 50%, indicating the button is inactive or unavailable | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 21 Source: https://docs.brikl.co/components/elements/buttons/button-21 Horizontal volume control with minus button, numeric input display, speaker icon, and plus button. ![Button 21](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-with-invisible-input-volume.png) ## Overview Button 21 is a quantity/volume stepper component featuring two circular icon buttons (minus and plus) flanking a read-only numeric input field with a speaker icon. It is designed for adjusting numeric values such as volume or quantity, with hover and disabled states for interactive feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 21** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------------------------------- | ----------------------------------------------------------------------------- | | Hovered | User hovers over the minus or plus button | Button background color changes to rgba(245, 244, 244, 1) — a light grey tint | | Disabled | Button is not clickable (isnt\_clickable condition) | Button opacity reduces to 50%, visually indicating it is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 22 Source: https://docs.brikl.co/components/elements/buttons/button-22 Horizontal button group with a QR code icon button and a Sign In label button, dark styled. ![Button 22](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-signin-and-qrcode.png) ## Overview Button 22 is a paired button group component combining two distinct action buttons: a QR Code icon button and a Sign In label button. They are arranged in a row layout within a container group, designed for authentication or file access flows. The QR Code button uses an icon-only style while the Sign In button displays text. Both share a dark background color scheme with subtle border separation and rounded corners on opposing sides, creating a unified segmented button appearance. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 22** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ----------------------------------------------- | ----------------------------- | | Hovered | User hovers over either button | Button opacity reduces to 90% | | Not Clickable | Button is set to non-interactive/disabled state | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 23 Source: https://docs.brikl.co/components/elements/buttons/button-23 Segmented button group with two joined buttons: a label button and an icon button. ![Button 23](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-preview-and-icon.png) ## Overview Button 23 is a segmented button component consisting of two visually connected buttons — a 'Preview' label button and a 'Settings' icon button — styled to appear as a unified control group. The left button displays text with an icon, while the right button shows only an icon. They share a common border style but have mirrored border-radius values to create a joined appearance. This component is ideal for toolbars, editor interfaces, or any UI where paired actions need to be presented as a cohesive control. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 23** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------- | | Hovered | Mouse hover over either button | Background color changes to rgba(245, 244, 244, 1) with an ease transition of 200ms | | Disabled | Element is not clickable (isnt\_clickable condition) | Opacity reduces to 50%, visually indicating the button is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 24 Source: https://docs.brikl.co/components/elements/buttons/button-24 Dark pill-shaped button group with a pinned label and a caret-down icon, side by side. ![Button 24](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-pinned-and-icon.png) ## Overview Button 24 is a compound button group component combining two dark-styled buttons: a 'Pinned' label button with a push-pin icon and a 'Files' icon-only button with a caret-down arrow. The left button uses rounded corners on the right side and the right button on the left, creating a seamless joined appearance. It is designed for navigation or filtering interfaces where a pinned context and a dropdown trigger are paired together. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 24** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------ | -------------------------------------------- | | Hovered | User hovers over either button | Opacity of the hovered button reduces to 90% | | Disabled | Button is set to not clickable | Opacity of the button reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 25 Source: https://docs.brikl.co/components/elements/buttons/button-25 Split button with left icon segment and text 'Previous' label, dark background, rounded corners. ![Button 25](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-previous-icon-left.png) ## Overview Button 25 is a split navigation button component combining two joined button segments: a left icon button (caret-left) and a 'Previous' label button. Together they form a compound previous-navigation control with a dark theme, designed to allow users to navigate backward in a flow or paginated interface. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 25** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------- | | Hovered | Parent group (bTHPf) is hovered | Both buttons reduce opacity to 90%, providing a subtle hover feedback effect | | Not Clickable | The individual button element is not clickable | The affected button reduces opacity to 50%, indicating a disabled or inactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 26 Source: https://docs.brikl.co/components/elements/buttons/button-26 Split button group with a primary 'Next' label button and a secondary icon button, arranged in a row. ![Button 26](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-next-icon-right.png) ## Overview Button 26 is a split-button component combining two visually connected buttons: a primary dark 'Next' button on the left and a secondary icon button (caret-right) on the right. Together they form a unified pill-style control, commonly used for navigation or multi-action scenarios where a primary action and a related secondary action (e.g., proceeding to next step or accessing files) are grouped together. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 26** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------------- | | Hovered | Parent group (Group - Next & Icon Right) is hovered | Both buttons reduce opacity to 90%, providing a subtle hover feedback on the entire group | | Not Clickable | Either button's own 'isnt\_clickable' condition is met | The affected button reduces opacity to 50%, indicating a disabled or inactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Button 27 Source: https://docs.brikl.co/components/elements/buttons/button-27 Horizontal button group with a 'Like' icon button and a count button, joined together. ![Button 27](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Buttons/button-like-and-count.png) ## Overview Button 27 is a social interaction component featuring two visually joined buttons: a 'Like' button with a thumbs-up icon and a static count button displaying '86'. The two buttons share borders to form a single cohesive pill-like group, commonly used in content feeds, posts, or cards to allow users to like content and see the current like count. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Button 27** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------- | | Hovered | Mouse hovers over the parent group (bTHQV) | Both buttons change background color to rgba(245, 244, 244, 1) with an ease transition of 200ms | | Not Clickable | The button itself is not clickable | Button opacity reduces to 50%, indicating a disabled or inactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Checkbox 01 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-01 A horizontal row group with a square icon checkbox and a label text beside it. ![Checkbox 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-simple.png) ## Overview Checkbox 01 is a simple, interactive checkbox component built in Bubble.io. It consists of an icon acting as the checkbox visual and a text label. It uses a custom boolean state to track whether the checkbox is selected or not, toggling between a checked and unchecked appearance when clicked. It is fully free to use, requires no plugins or custom code, and works on both web and mobile platforms. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | Unchecked | Default state or when 'selected\_' custom state is false | Displays an empty square icon (material outlined crop\_square) indicating the checkbox is not selected | | Checked | User clicks the group when 'selected\_' custom state is false | Displays a check icon (material outlined check) with a dark background, indicating the checkbox is selected | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------- | ------------------------------------------------------------------------------ | | Group - Simple Checkbox is clicked (when selected\_ is false) | Sets the 'selected\_' custom state to true, marking the checkbox as checked | | Group - Simple Checkbox is clicked (when selected\_ is true) | Sets the 'selected\_' custom state to false, marking the checkbox as unchecked | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Checkbox 02 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-02 A disabled checkbox row with a square icon and label text in a horizontal layout. ![Checkbox 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-disabled.png) ## Overview Checkbox 02 is a disabled checkbox UI component designed to represent a non-interactive checkbox state. It consists of a square icon (representing the unchecked state) paired with a 'Disabled checkbox' label, arranged horizontally. The component is visually muted at 50% opacity when its non-clickable state is triggered, clearly communicating to users that this option is unavailable for interaction. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | Disabled State | Element is not clickable (isnt\_clickable condition on ThisElement) | The group opacity drops to 50%, visually indicating the checkbox is disabled and non-interactive. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Checkbox 03 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-03 Horizontal checkbox row with an icon and label text, supporting strikethrough on selection. ![Checkbox 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-strikethrough-text.png) ## Overview Checkbox 03 is a interactive checkbox component that displays a square icon alongside a text label. When clicked, it toggles a custom 'selected' state, changing the icon to a checkmark and applying a strikethrough style to the label text, mimicking a to-do item completion interaction. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | Selected | User clicks the group when 'selected\_' custom state is false | Icon changes from an empty square to a filled checkmark, and the label text renders with strikethrough formatting | | Unselected | User clicks the group when 'selected\_' custom state is true | Icon reverts to an empty square and the label text displays normally without strikethrough | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------- | | Group 'Checkbox W/ Strikethrough Text (Checkbox 03)' is clicked (when selected\_ is false) | Sets the custom state 'selected\_' to true on the group element | | Group 'Checkbox W/ Strikethrough Text (Checkbox 03)' is clicked (when selected\_ is true) | Sets the custom state 'selected\_' to false on the group element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Checkbox 04 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-04 A horizontal row checkbox with an icon and a clickable terms and service text link. ![Checkbox 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-terms-and-service.png) ## Overview Checkbox 04 is a terms and service agreement checkbox component. It displays a square icon acting as a checkbox alongside an underlined hyperlinked label reading 'I agree to the terms and service'. The component uses a custom state to track whether the checkbox is selected or unselected, toggling the icon appearance accordingly. It is designed for forms requiring user consent before proceeding. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | Selected | User clicks the group when the custom state 'selected\_' is false | The icon changes from a square outline (crop\_square) to a filled check mark (check) with a dark background, indicating the checkbox is checked. | | Unselected | User clicks the group when the custom state 'selected\_' is true | The icon reverts to the square outline style, indicating the checkbox is unchecked. | | Mobile Font Size | Page width is less than the built-in mobile breakpoint | The label text font size reduces to 14px for better readability on mobile screens. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | | Group 'Checkbox Terms and Service' is clicked (when selected\_ is false) | Sets the custom state 'selected\_' on the group to true, marking the checkbox as checked. | | Group 'Checkbox Terms and Service' is clicked (when selected\_ is true) | Sets the custom state 'selected\_' on the group to false, marking the checkbox as unchecked. | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Checkbox 05 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-05 Inline horizontal checkbox group with three labeled options, icons, and toggle states. ![Checkbox 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-multiple-inline.png) ## Overview Checkbox 05 is a multi-select inline checkbox component featuring three horizontally arranged options (Option 1, Option 2, Option 3). Each option consists of a square icon acting as a checkbox and a text label. Selections are tracked via a custom state list on the parent group, allowing multiple items to be selected or deselected simultaneously. It is designed for forms or filter UIs where users need to pick multiple values in a compact row layout. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | Checked | User clicks an option group; the option's item\_ number is contained in the parent's selected\_item\_ list | Icon changes from outlined crop\_square to filled check with a dark background (rgba(11,8,9,1)) | | Unchecked | Option's item\_ number is not present in the parent's selected\_item\_ list | Icon displays outlined crop\_square with white background and light border | | Mobile font size | Current page width is less than the built-in mobile breakpoint | Label text font size reduces to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------------------- | ------------------------------------------------------------------------- | | Group - Option 2 clicked (condition: item 2 NOT in selected\_item\_ list) | Adds item 2 to the parent group's selected\_item\_ custom state list | | Group - Option 2 clicked (condition: item 2 IS in selected\_item\_ list) | Removes item 2 from the parent group's selected\_item\_ custom state list | | Group - Option 1 clicked (condition: item 1 NOT in selected\_item\_ list) | Adds item 1 to the parent group's selected\_item\_ custom state list | | Group - Option 1 clicked (condition: item 1 IS in selected\_item\_ list) | Removes item 1 from the parent group's selected\_item\_ custom state list | | Group - Option 3 clicked (condition: item 3 NOT in selected\_item\_ list) | Adds item 3 to the parent group's selected\_item\_ custom state list | | Group - Option 3 clicked (condition: item 3 IS in selected\_item\_ list) | Removes item 3 from the parent group's selected\_item\_ custom state list | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Checkbox 06 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-06 Multi-column checkbox group with icon indicators and labeled options in a row layout. ![Checkbox 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-multiple-column.png) ## Overview Checkbox 06 is a multiple-selection checkbox component displaying options in a multi-column layout. Each option consists of a square icon (acting as a checkbox indicator) and a text label. The component tracks selected items using a custom state list on the parent group, toggling items in or out of the selection when clicked. It is suitable for forms, filters, or preference selections where multiple choices are allowed simultaneously. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | Checked | User clicks an option group whose item value is not yet in the selected\_item\_ custom state list | The icon switches to a filled check icon with a dark background (rgba(11,8,9,1)), indicating the option is selected | | Unchecked | User clicks an option group whose item value is already in the selected\_item\_ custom state list | The icon reverts to an outlined square icon with no fill, indicating the option is deselected | | Mobile font size | Current page width is less than the built-in mobile breakpoint | Option label text font size reduces to 14px for better readability on small screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | | Group - Option 1 clicked (when item is NOT in selected list) | Adds the option's item\_ value to the selected\_item\_ custom state list on the parent group | | Group - Option 1 clicked (when item IS in selected list) | Removes the option's item\_ value from the selected\_item\_ custom state list on the parent group | | Group - Option 2 clicked (when item is NOT in selected list) | Adds the option's item\_ value to the selected\_item\_ custom state list on the parent group | | Group - Option 2 clicked (when item IS in selected list) | Removes the option's item\_ value from the selected\_item\_ custom state list on the parent group | | Group - Option 3 clicked (when item is NOT in selected list) | Adds the option's item\_ value to the selected\_item\_ custom state list on the parent group | | Group - Option 3 clicked (when item IS in selected list) | Removes the option's item\_ value from the selected\_item\_ custom state list on the parent group | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Checkbox 07 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-07 Vertical checkbox group with icon, label, sublabel, and description text in column layout. ![Checkbox 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-with-sublabel-and-description.png) ## Overview Checkbox 07 is a multi-option checkbox component featuring up to two selectable options, each with a custom icon-based checkbox, a primary label, a sublabel, and a description text. It uses custom states to track selected items and supports toggling selections on and off via click workflows. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Checked | User clicks an option group | The checkbox icon changes to a filled check mark with a dark background (rgba(11,8,9,1)) | | Unchecked | User clicks an already selected option group | The checkbox icon reverts to an empty square with a white background and border | | Mobile font size | Current page width is less than the built-in mobile breakpoint | Text font size increases to 14px for improved readability on small screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | | Group - Option 1 Sublabel (Checkbox 07) is clicked (condition: item not in selected list) | Adds the option's item number to the parent group's selected\_item\_ custom state list | | Group - Option 1 Sublabel (Checkbox 07) is clicked (condition: item already in selected list) | Removes the option's item number from the parent group's selected\_item\_ custom state list | | Group - Option 2 Sublabel (Checkbox 07) is clicked (condition: item not in selected list) | Adds the option's item number to the parent group's selected\_item\_ custom state list | | Group - Option 2 Sublabel (Checkbox 07) is clicked (condition: item already in selected list) | Removes the option's item number from the parent group's selected\_item\_ custom state list | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Checkbox 08 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-08 Vertical checkbox list with icons, labels, sublabels, and descriptions in a clean card layout. ![Checkbox 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-with-sublabel-and-description-right.png) ## Overview Checkbox 08 is a multi-option checkbox component featuring two selectable options, each with a custom checkbox icon, a primary label, a sublabel, and a description text. It uses custom states to track selected items and toggling logic via workflows, making it suitable for forms, preference selectors, or filter UIs. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | Selected | User clicks on a checkbox option group | The checkbox icon changes from an empty square to a filled check mark with a dark background, indicating the option is selected | | Deselected | User clicks on an already selected checkbox option group | The checkbox icon reverts to an empty square with a white background, indicating the option is deselected | | Mobile Responsive | Current page width is less than the built-in mobile breakpoint | Font size of text elements increases to 14px for better readability on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | Group - Option 01 Sublabel (Checkbox 08) is clicked AND option is NOT currently selected | Adds Option 1's item value to the selected\_item\_ custom state list on the parent group | | Group - Option 01 Sublabel (Checkbox 08) is clicked AND option IS currently selected | Removes Option 1's item value from the selected\_item\_ custom state list on the parent group | | Group - Option 02 Sublabel (Checkbox 08) is clicked AND option is NOT currently selected | Adds Option 2's item value to the selected\_item\_ custom state list on the parent group | | Group - Option 02 Sublabel (Checkbox 08) is clicked AND option IS currently selected | Removes Option 2's item value from the selected\_item\_ custom state list on the parent group | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Checkbox 09 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-09 Vertical checkbox list with expandable text input field revealed on selection, styled with Inter font. ![Checkbox 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-with-expansion.png) ## Overview Checkbox 09 is a multi-option checkbox component that supports expansion behavior. When a checkbox option is selected, it reveals an additional text input field for the user to enter supplementary details. It uses custom states to track selected items and conditionally show or hide the expansion input, making it ideal for forms requiring conditional follow-up information. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | | Option Selected | User clicks a checkbox option group | Icon changes from outlined square to filled check with black background; selected item is added to the custom state list | | Option Deselected | User clicks an already-selected checkbox option group | Icon reverts to outlined square; selected item is removed from the custom state list and the expansion input is hidden | | Expansion Input Visible | Checkbox option is selected (item not previously in selected list) | Text input field appears below the selected option and receives focus automatically | | Input Focused | Input element receives focus | Box shadow appears around the input to indicate active focus state | | Input Invalid | Input fails validation | Border turns red and a red-tinted box shadow appears around the input | | Input Disabled | Input is not clickable | Input opacity reduces to 50% | | Mobile Responsive | Current page width is less than built-in mobile breakpoint | Font size of label and description text increases to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Group - Option 01 is clicked (when item NOT already selected) | Adds the option's item number to the parent group's custom state selected\_item\_ list, shows the expansion input, and sets focus to it | | Group - Option 01 is clicked (when item IS already selected) | Removes the option's item number from the parent group's custom state selected\_item\_ list and hides the expansion input | | Group - Option 02 is clicked (when item NOT already selected) | Adds the option's item number to the parent group's custom state selected\_item\_ list and shows the expansion input | | Group - Option 02 is clicked (when item IS already selected) | Removes the option's item number from the parent group's custom state selected\_item\_ list and hides the expansion input | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Checkbox 10 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-10 Multi-option checkbox group with icon, label, sublabel, and description in card layout. ![Checkbox 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-with-sublabel-and-description-filled.png) ## Overview Checkbox 10 is a styled checkbox component featuring multiple selectable options, each displayed as a bordered card containing a checkbox icon, a title, a sublabel, and a description. It uses custom states to track which options are selected, toggling border styles and icon fills to reflect selection. Designed for both web and mobile, it supports responsive font sizing and is suitable for multi-select form inputs. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | Selected Option | User clicks a checkbox option group that is not yet selected | The option card border color changes to dark (rgba(27,23,24,1)) and the checkbox icon fills with a dark background and a check mark | | Deselected Option | User clicks a checkbox option group that is already selected | The option card reverts to its default border style and the checkbox icon returns to an empty unchecked appearance | | Mobile Responsive | Current page width is less than the built-in mobile breakpoint | Font size of labels and descriptions increases to 14px for better mobile readability | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | | Group - Checkbox Option 01 is clicked (condition: option 01 is NOT in selected list) | Adds Option 01's item value to the parent group's custom state 'selected\_item\_' list | | Group - Checkbox Option 01 is clicked (condition: option 01 IS in selected list) | Removes Option 01's item value from the parent group's custom state 'selected\_item\_' list | | Group - Checkbox Option 02 is clicked (condition: option 02 is NOT in selected list) | Adds Option 02's item value to the parent group's custom state 'selected\_item\_' list | | Group - Checkbox Option 02 is clicked (condition: option 02 IS in selected list) | Removes Option 02's item value from the parent group's custom state 'selected\_item\_' list | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Checkbox 11 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-11 Card-style checkbox group with logo, title, sublabel, description, and icon indicator per option. ![Checkbox 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-with-sublabel-and-description-filled-image.png) ## Overview Checkbox 11 is a multi-select checkbox component built as a group of styled card options. Each option includes a logo image, a title, a sublabel, a description text, and a visual checkbox icon. Selections are tracked via a custom state (selected\_item\_) on the parent group, allowing multiple items to be toggled on or off. The component is suitable for product selection, plan picking, or any multi-choice UI requiring rich card-style options. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | Selected | User clicks a checkbox option group | Border color changes to solid dark (rgba(27,23,24,1)) and the checkbox icon fills with a dark background and a checkmark icon | | Unselected | User clicks an already selected checkbox option group | Border reverts to default light style and checkbox icon returns to empty square appearance | | Mobile font size | Current page width is less than the built-in mobile breakpoint | Font size of label and sublabel text increases to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | Group - Checkbox Option 01 is clicked (condition: item not in selected list) | Adds the option's custom item\_ value to the selected\_item\_ list state on the parent group | | Group - Checkbox Option 01 is clicked (condition: item already in selected list) | Removes the option's custom item\_ value from the selected\_item\_ list state on the parent group | | Group - Checkbox Option 02 is clicked (condition: item not in selected list) | Adds the option's custom item\_ value to the selected\_item\_ list state on the parent group | | Group - Checkbox Option 02 is clicked (condition: item already in selected list) | Removes the option's custom item\_ value from the selected\_item\_ list state on the parent group | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Checkbox 12 Source: https://docs.brikl.co/components/elements/checkboxes/checkbox-12 Two-column checkbox card layout with icons, labels, and bordered selection states. ![Checkbox 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-grid-selection.png) ## Overview Checkbox 12 is a multi-select checkbox component featuring two styled card-based options, each containing an icon and a label. Users can toggle options on and off, with visual feedback provided through border and icon changes. The component uses custom states to track selected items and supports both web and mobile layouts. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Checkbox 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Option Selected | When the option's item value is contained in the parent group's selected\_item\_ custom state list | The card border changes to a dark color (rgba(27,23,24,1)) and the checkbox icon switches to a filled check mark with a dark background | | Option Unselected | Default state when the item is not in the selected\_item\_ list | The card displays a light border and the checkbox icon shows an empty square with a white background | | Mobile Responsive | Current page width is less than the built-in mobile breakpoint | Text font size reduces to 14px for better fit on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | Group - Checkbox Option 01 is clicked (condition: item NOT in selected list) | Adds Option 01's item value to the selected\_item\_ custom state list on the parent group | | Group - Checkbox Option 01 is clicked (condition: item already in selected list) | Removes Option 01's item value from the selected\_item\_ custom state list on the parent group | | Group - Checkbox Option 02 is clicked (condition: item NOT in selected list) | Adds Option 02's item value to the selected\_item\_ custom state list on the parent group | | Group - Checkbox Option 02 is clicked (condition: item already in selected list) | Removes Option 02's item value from the selected\_item\_ custom state list on the parent group | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Dropdown 01 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-01 Vertical dropdown menu with four icon-labeled buttons inside a rounded floating panel. ![Dropdown 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-simple.png) ## Overview Dropdown 01 is a GroupFocus-based dropdown menu component containing four action buttons (Copy, Account, Bookmark, Settings), each with a Phosphor icon and label. It appears as a floating panel anchored to a reference element, designed to provide contextual navigation or action options when triggered. The component uses column layout, subtle box shadow, and hover/disabled states for interactive feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------------------------------- | ---------------------------------------------------------------------------- | | Hovered | Mouse hover over any button | Button background changes to rgba(245,244,244,1) creating a subtle highlight | | Disabled | Button is not clickable (isnt\_clickable condition) | Button opacity reduces to 50%, indicating it is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Dropdown 02 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-02 Vertical dropdown menu with four icon-label buttons in a floating card container. ![Dropdown 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-menu-with-icons.png) ## Overview Dropdown 02 is a GroupFocus-based dropdown menu component that displays a compact vertical list of action buttons (Copy, Account, Bookmark, Settings), each paired with a Phosphor icon. It appears as a floating card with a subtle shadow and border, designed to be triggered by a reference element and dismissed on outside click. It is ideal for contextual action menus or user account menus in web applications. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ----------------------------------------- | ----------------------------------------------------------- | | Hovered | Mouse hovers over any button | Button background changes to light gray rgba(245,244,244,1) | | Not Clickable | Button is set to non-interactive/disabled | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Dropdown 03 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-03 Vertical dropdown menu with icons, five action buttons, a divider, and a destructive delete option. ![Dropdown 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-grouped-items.png) ## Overview Dropdown 03 is a GroupFocus-based contextual dropdown menu component containing six action buttons (Copy, Account, Bookmark, Settings, Delete) with phosphor icons, a visual divider separator, and a distinct red-styled destructive action. It is designed to appear as a floating panel anchored to a trigger element, providing quick access to common actions with hover state feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | Hovered | Mouse hover over any action button | Button background changes to rgba(245,244,244,1) light gray; Delete button changes to rgba(251,44,54,0.1) light red tint | | Disabled | Button is not clickable (isnt\_clickable condition) | Button opacity reduces to 50%, indicating a non-interactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Dropdown 04 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-04 Vertical dropdown menu with icons, four action buttons, a divider, and a destructive delete option. ![Dropdown 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-labeled-grouped-items.png) ## Overview Dropdown 04 is a GroupFocus-based contextual dropdown menu component containing five labeled icon buttons: Copy, Account, Bookmark, Settings, and Delete. It is designed to appear as a floating action menu triggered by a parent element. The first four items are standard actions, visually separated from the destructive 'Delete' button by a horizontal divider. Each button features a hover state and a disabled (non-clickable) state, making it suitable for context menus, overflow menus, or user account action panels. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | Hovered | User hovers over any button | Button background changes to a light grey (rgba(245,244,244,1)); Delete button background changes to a light red tint (rgba(251,44,54,0.1)) | | Disabled | Button is not clickable (isnt\_clickable condition) | Button opacity reduces to 50%, indicating a non-interactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Dropdown 05 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-05 Dropdown menu with icon-labeled buttons (Copy, Account, Bookmark, Settings, Delete) in a GroupFocus overlay. ![Dropdown 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-checkbox-items.png) ## Overview Dropdown 05 is a contextual dropdown menu component that displays a vertical list of action buttons—Copy, Account, Bookmark, Settings, and Delete—each with a corresponding icon. It uses a GroupFocus element to show/hide the menu and includes workflows to manage multi-select state via custom states, making it suitable for action menus or item management interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ------------------------------------------------------------- | ------------------------------------------------------------------- | | Hovered | Mouse hover over any action button | Button background changes to a light gray (rgba(245,244,244,1)) | | Hovered (Delete) | Mouse hover over the Delete button | Button background changes to a light red tint (rgba(251,44,54,0.1)) | | Disabled | Button is not clickable (isnt\_clickable condition) | Button opacity reduces to 50% | | Item Selected | Checkbox button clicked when item is not in selected list | Item is added to the custom state items\_selected\_ list | | Item Deselected | Checkbox button clicked when item is already in selected list | Item is removed from the custom state items\_selected\_ list | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | Checkbox 01 button clicked (item not in selected list) | Adds the current item (custom.item\_) to the custom state items\_selected\_ on the parent element | | Checkbox 01 button clicked (item already in selected list) | Removes the current item (custom.item\_) from the custom state items\_selected\_ on the parent element | | Checkbox 02 button clicked (item not in selected list) | Adds the current item (custom.item\_) to the custom state items\_selected\_ on the parent element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Dropdown 06 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-06 Dropdown with radio button options in a GroupFocus, vertical list layout with icons and labels. ![Dropdown 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-radio-items.png) ## Overview Dropdown 06 is a custom dropdown component featuring radio button-style selection. It displays a GroupFocus overlay with multiple selectable options (Option 1, Option 2, Option 3), each containing a circular radio icon and a text label. When an option is clicked, a custom state tracks the selected item, and the radio icon updates visually to reflect the active selection. It supports hover and disabled states per option row. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | Hovered Option | Mouse hover over an option group | Background color of the hovered option changes to rgba(245,244,244,1) | | Disabled Option | Option group is not clickable (isnt\_clickable condition) | Opacity of the option group is reduced to 50% | | Selected Radio | items\_selected\_ custom state matches the item\_ value of the option | Radio icon changes to a filled dot (phosphor fill dot) with dark background rgba(27,23,24,1) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Group - Option 1 (Radio) clicked | Sets items\_selected\_ custom state on the GroupFocus: if Option 1 is already selected, clears the value to 0; otherwise sets it to Option 1's item\_ value (1) | | Group - Option 2 (Radio) clicked | Sets items\_selected\_ custom state on the GroupFocus: if Option 2 is already selected, clears the value to 0; otherwise sets it to Option 2's item\_ value (2) | | Group - Option 3 (Radio) clicked | Sets items\_selected\_ custom state on the GroupFocus: if Option 3 is already selected, clears the value to 0; otherwise sets it to Option 3's item\_ value (3) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Dropdown 07 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-07 Vertical dropdown menu with four icon-labeled buttons in a floating card container. ![Dropdown 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-with-hint.png) ## Overview Dropdown 07 is a GroupFocus-based dropdown menu component that displays a vertical list of navigational action buttons (Documentation, Support, Contact us, Settings), each paired with a Phosphor icon. It appears as a floating card anchored to a trigger element, designed for help/settings navigation menus in web applications. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------- | ----------------------------------------------- | | Hovered | Mouse hover over any button | Underline is applied to the hovered button text | | Disabled | Button is not clickable | Button opacity is reduced to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Dropdown 08 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-08 Dropdown menu with header, icon buttons, divider, and grouped action options in a vertical list. ![Dropdown 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-icon-profile.png) ## Overview Dropdown 08 is a GroupFocus-based dropdown menu component that displays a contextual popup panel. It includes a header section showing a 'Sign in as' label with an email address, followed by a divider and a list of icon-accompanied action buttons (Option 1, Option 2, Option 3, and Logout). It is designed to appear when a trigger element is focused, providing quick navigation or action options in a clean, minimal style. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------------------------------- | --------------------------------------------------------------------------------------- | | Hovered | User hovers over any button option | Button background changes to rgba(245,244,244,1) with a smooth ease transition of 200ms | | Disabled | Button is not clickable (isnt\_clickable condition) | Button opacity reduces to 50%, indicating a non-interactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Dropdown 09 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-09 Dropdown menu with icon buttons, a divider, header with avatar and email, in a GroupFocus overlay. ![Dropdown 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-icon-profile-advanced.png) ## Overview Dropdown 09 is a GroupFocus-based dropdown component that displays a styled menu panel containing a header section with a user avatar image and email, multiple icon-label option buttons (Option 1, Option 2, Option 3), a visual divider, and a Logout button. It is designed for web use as a user account or navigation dropdown, triggered by a parent element click, and collapses automatically when focus is lost. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | | Hovered | Mouse hovers over any button element | Button background changes to rgba(245,244,244,1) with a smooth ease transition of 200ms | | Not Clickable | Button is in a non-clickable state | Button opacity reduces to 50%, visually indicating it is disabled | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Dropdown 10 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-10 Dropdown menu with header, icon-labeled options, divider, and logout button in a GroupFocus. ![Dropdown 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-icon-profile-with-image.png) ## Overview Dropdown 10 is a GroupFocus-based dropdown menu component that displays a user profile header (name and email) followed by a list of clickable options with icons (Option 1, Option 2, Option 3) and a Logout button. It is designed for navigation or account menus, appearing when a trigger element is clicked, with hover states for interactive feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------ | ----------------------------------------------------------------------------- | | Hovered | User hovers over any button option | Button background changes to rgba(245,244,244,1) providing a subtle highlight | | Not Clickable | Button is set to non-clickable state | Button opacity reduces to 50%, visually indicating it is disabled | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Dropdown 11 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-11 Dropdown menu with icon-prefixed options, each showing a label and description in a row layout. ![Dropdown 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-add-block.png) ## Overview Dropdown 11 is a styled GroupFocus dropdown component displaying multiple selectable options, each consisting of an icon, a primary label, and a secondary description. It is designed for rich dropdown menus where options benefit from visual icons and contextual descriptions, such as formatting pickers or action menus. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Hovered Option | Mouse hover over an individual option group (e.g., Group - Option Text, Group - Option Quote, Group - Option Italic) | Background color of the hovered option changes to rgba(245,244,244,1), creating a subtle highlight effect with a 200ms ease transition. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Dropdown 12 Source: https://docs.brikl.co/components/elements/dropdowns/dropdown-12 Notification dropdown panel with header, two notification rows, timestamps, and status indicators. ![Dropdown 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Dropdowns/dropdown-notifications.png) ## Overview Dropdown 12 is a notifications panel component that appears as a GroupFocus overlay. It displays a header with a 'Notifications' title and a 'Mark all as read' button, followed by a divider and two notification rows. Each row contains a bold message text with contextual details, a relative timestamp, and a colored status dot indicator. The component is designed for web use and provides a clean, structured way to surface recent user notifications within an application. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Dropdown 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | | Notification Row Hovered | User hovers over a notification group (GP - Notification 01 or 02) | Background color changes to rgba(245,244,244,1), providing a subtle highlight effect | | Mark All As Read - Hovered | User hovers over the 'Mark all as read' button | Text becomes underlined | | Mark All As Read - Not Clickable | Button is in a non-clickable state | Button opacity reduces to 50%, visually indicating it is disabled | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # File Uploader 01 Source: https://docs.brikl.co/components/elements/file-uploaders/file-uploader-01 Centered file uploader with image preview, upload button, filename display, and remove option. ![File Uploader 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/File%20Uploaders/file-uploader-basic.png) ## Overview File Uploader 01 is a Bubble.io UI component that allows users to upload image files through a styled button interface. It displays a live preview of the uploaded image, dynamically changes the button label from 'Upload image' to 'Change image' once a file is selected, shows the filename, and provides a 'Remove' button to clear the selection. The component handles all states visually including hover, disabled, and file-selected states. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **File Uploader 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | File Selected – Preview Visible | FileUploader 01 value is not empty | The preview group displays the uploaded image as a background, the icon inside preview is hidden, and the upload button label changes to 'Change image' | | File Empty – Remove Group Hidden | FileUploader 01 value is empty | The remove button and filename group are hidden from view | | File Selected – Remove Group Visible | FileUploader 01 value is not empty | The group containing the Remove button and filename becomes visible | | File Uploader Hovered | FileUploader 01 is hovered | The upload button opacity increases to 90 | | File Uploader Not Clickable | FileUploader 01 is not clickable | The upload button opacity reduces to 50, indicating a disabled state | | Remove Button Hovered | Remove button is hovered | Underline appears on the Remove button text | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------- | | BT - Remove (FU 01) is clicked | Resets the group GP - BT File Uploader 01, clearing the file input and reverting the component to its empty state | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # File Uploader 02 Source: https://docs.brikl.co/components/elements/file-uploaders/file-uploader-02 Square file uploader with icon, hover state, and a remove button overlay in top-right corner. ![File Uploader 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/File%20Uploaders/file-uploader-avatar-upload-button.png) ## Overview File Uploader 02 is a compact, square-shaped file upload component that allows users to upload a file (such as a profile image or document). It displays an icon placeholder before upload, shows a background image preview once a file is selected, and reveals a dismiss/remove button to clear the uploaded file. It supports hover and filled states for a polished interactive experience. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **File Uploader 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------- | | Hover State | User hovers over the group element | Background color changes to a light gray (rgba(245,244,244,1)) with a smooth ease transition | | File Selected - Background Preview | FileUploader element (bTSPG) has a non-empty value | Group background switches to display the uploaded file as a centered background image | | Icon Hidden on File Selected | FileUploader element (bTSPG) has a non-empty value | The placeholder icon becomes hidden | | Remove Button Visible on File Selected | FileUploader element (bTSPG) has a non-empty value | The remove (X) button becomes visible in the top-right corner | | Remove Button Hover | User hovers over the remove button | Remove button opacity increases to 90% | | Remove Button Disabled | Remove button is not clickable | Remove button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | BT - Remove File Uploader 02 is clicked | Resets the parent group (bTSPA), clearing the uploaded file and returning the component to its default empty state | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # File Uploader 03 Source: https://docs.brikl.co/components/elements/file-uploaders/file-uploader-03 Circular file uploader with drag-and-drop area, upload icon, and remove button overlay. ![File Uploader 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/File%20Uploaders/file-uploader-avatar-circle.png) ## Overview File Uploader 03 is a circular avatar-style file upload component that allows users to upload a file by clicking or dragging onto a dashed circular boundary. It displays an icon prompt when empty and shows the uploaded image as a background when a file is selected. A remove button appears in the corner to clear the uploaded file. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **File Uploader 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------- | | Hovered | User hovers over the main group container | Background color changes to a light gray (rgba(245,244,244,1)) | | File Selected - Background Image | File uploader element has a non-empty value (file uploaded) | The uploaded file is displayed as a centered background image on the group | | Icon Hidden | File uploader element has a non-empty value (file uploaded) | The placeholder user-circle icon becomes hidden | | Remove Button Visible | File uploader element has a non-empty value (file uploaded) | The remove button becomes visible, allowing the user to clear the file | | Remove Button Hovered | User hovers over the remove button | Remove button opacity increases to 90% | | Remove Button Not Clickable | Remove button is not clickable | Remove button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | BT - Remove File Uploader 03 is clicked | Resets the main group (GP - File Uploader 03), clearing the uploaded file and reverting the component to its empty state | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # File Uploader 04 Source: https://docs.brikl.co/components/elements/file-uploaders/file-uploader-04 Dashed-border file uploader with icon, label, file preview background, and remove button. ![File Uploader 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/File%20Uploaders/file-uploader-drop-area.png) ## Overview File Uploader 04 is a styled drag-and-drop file input component that allows users to upload an image file. It displays a dashed bordered container with an image icon and instructional text by default. Once a file is uploaded, the container background switches to show a preview of the uploaded image, the detail group hides, and a remove button appears to reset the selection. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **File Uploader 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | | Hovered | User hovers over the main group | Background color of the group changes to rgba(245,244,244,1) | | File Uploaded | FileUploader element has a non-empty value | Background switches to display the uploaded image, details group hides, and remove button becomes visible | | Remove Button Hovered | User hovers over the remove button | Remove button opacity increases to 90 | | Remove Button Not Clickable | Remove button is not clickable | Remove button opacity decreases to 50 | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | BT - Remove File Uploader 04 is clicked | Resets the main group (GP - File Uploader 04), clearing the uploaded file and restoring the default empty state | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # File Uploader 05 Source: https://docs.brikl.co/components/elements/file-uploaders/file-uploader-05 Dashed-border file upload area with icon, text, and uploaded file display with remove option. ![File Uploader 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/File%20Uploaders/file-uploader-single-file-uploader.png) ## Overview File Uploader 05 is a drag-and-drop file input component that allows users to upload a single file. It displays an upload icon with instructional text before a file is selected, and switches to show the uploaded file's name with a remove button once a file has been chosen. The component manages its state through a custom state that tracks the uploaded file. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **File Uploader 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | File Uploaded | When the custom state 'file\_' on the container is not empty (a file has been uploaded) | The file uploader input becomes disabled and reduced to 50% opacity, preventing additional uploads | | Hover (Empty) | When the upload group is hovered and no file has been uploaded yet | Background color changes to a light gray (rgba(245,244,244,1)) | | File Displayed | When the custom state 'file\_' on the container is not empty | The uploaded file group becomes visible, showing the file name and a remove icon | | No File (Hidden Uploaded Group) | When the custom state 'file\_' on the container is empty | The uploaded file display group is hidden | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | FileUploader - 05 value changed | Sets the custom state 'file\_' on the container group to the current value of the file input element | | Icon - Remove File Uploader 05 is clicked | Resets the container group and clears the custom state 'file\_', effectively removing the uploaded file and resetting the component | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # File Uploader 06 Source: https://docs.brikl.co/components/elements/file-uploaders/file-uploader-06 Dashed-border file upload zone with drag-and-drop area, icon, labels, and uploaded file list. ![File Uploader 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/File%20Uploaders/file-uploader-multiple-files-uploader-with-list.png) ## Overview File Uploader 06 is a multi-file upload component that allows users to drag and drop or click to browse files. It supports up to 10 files with a maximum size of 100MB each. It displays uploaded files in a repeating group list, allows individual file removal via an X icon, and includes a 'Remove All' button. The uploader becomes disabled and semi-transparent once the 10-file limit is reached. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **File Uploader 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------- | | Hovered (under limit) | User hovers over the upload group and file count is less than 10 | Background color changes to a light gray (rgba(245,244,244,1)) | | Limit reached | Custom state file list count equals 10 | Group becomes 50% opaque and the file input is disabled, preventing further uploads | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------------- | ---------------------------------------------------------------------------------------------------- | | FileUploader - 06 value changed | Adds the newly uploaded file to the custom state list on the parent container, then resets the group | | Icon - Remove Item FU (06) is clicked | Removes the corresponding file from the custom state list on the parent container | | BT - Remove All Files (FU 06) is clicked | Clears the entire custom state file list on the parent container, resetting all uploaded files | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Input 01 Source: https://docs.brikl.co/components/elements/inputs/input-01 Vertical column layout with a label text and a styled text input field below it. ![Input 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/simple-input.jpg) ## Overview Input 01 is a simple, clean text input component consisting of a label ('Simple Input') and a single-line input field with placeholder text ('Email'). It is designed for capturing user text entries such as email addresses or other short-form data. The component includes focus, validation error, and disabled visual states, making it suitable for forms requiring basic input with clear user feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- | | Focused | Input element is focused by the user | Adds a soft box shadow (rgba(216,211,212,0.5)) with spread of 3 around the input field | | Invalid | Input value fails validation | Border turns red (rgba(251,44,54,1)) and a red-tinted box shadow (rgba(251,44,54,0.2)) appears around the input | | Disabled | Input is not clickable | Input opacity is reduced to 50%, indicating a non-interactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 02 Source: https://docs.brikl.co/components/elements/inputs/input-02 Vertical column group with label, text input field, and helper text below. ![Input 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-helper-text.jpg) ## Overview Input 02 is a labeled text input component with an accompanying helper text underneath. It is designed to collect user input (such as an email address) while providing contextual guidance via a subtitle message. The component includes focus and validation states for enhanced UX feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------ | | Focused | Input element is focused by the user | Adds a soft box shadow around the input to indicate active focus | | Invalid | Input fails validation (isnt\_valid condition) | Border turns red (rgba(251,44,54,1)) and a red-tinted box shadow appears | | Disabled | Input is not clickable (isnt\_clickable condition) | Input opacity is reduced to 50% to indicate a disabled state | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Label and helper text font size adjusts to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 03 Source: https://docs.brikl.co/components/elements/inputs/input-03 Vertical column layout with a label row and a styled text input field with hint. ![Input 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-hint.jpg) ## Overview Input 03 is a form input component featuring a label row with a title ('Input with hint') and an optional tag, paired with a styled email text input field. It supports focus, validation error, and disabled states with smooth visual transitions, making it suitable for accessible and polished form UIs. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | --------------------------------------------------------------------- | | Focused | Input element is focused by the user | Adds a soft box shadow around the input to indicate active focus | | Invalid | Input fails validation (isnt\_valid condition) | Border turns red and a red-tinted box shadow appears around the input | | Disabled | Input is not clickable (isnt\_clickable condition) | Input opacity is reduced to 50%, visually indicating a disabled state | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Label and optional text font size adjusts to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 04 Source: https://docs.brikl.co/components/elements/inputs/input-04 Gray background input field with label, rounded corners, and focus shadow state. ![Input 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-gray-background.jpg) ## Overview Input 04 is a simple, styled text input component with a gray background designed for collecting user text data such as an email address. It features a label above the input, a placeholder, rounded corners, and a subtle box shadow on focus, making it suitable for forms on both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | | Focused | Input element receives focus (is\_focused) | Border becomes solid with color rgba(216,211,212,1) and a spread box shadow rgba(216,211,212,0.5) appears around the input | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 05 Source: https://docs.brikl.co/components/elements/inputs/input-05 Disabled text input with label, styled with border, shadow, and rounded corners. ![Input 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-disabled.jpg) ## Overview Input 05 is a disabled email input field component paired with a descriptive label. It is designed to visually communicate a non-interactive state to users, featuring a grayed-out appearance with opacity reduction when not clickable. The component includes conditional visual states for focus and validation error feedback, making it useful in forms where certain fields should be locked or read-only. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------ | ----------------------------------------------------------------------------------- | | Focused | Input element is focused | Adds a soft box shadow (rgba(216,211,212,0.5)) with 3px spread around the input | | Invalid | Input value is not valid | Border color changes to red (rgba(251,44,54,1)) and a red-tinted box shadow appears | | Disabled / Not Clickable | Input is not clickable | Opacity reduces to 50%, visually indicating the field is non-interactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 06 Source: https://docs.brikl.co/components/elements/inputs/input-06 Vertical column layout with a label, text input field, and an error message text below. ![Input 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-error.jpg) ## Overview Input 06 is a form input component designed to collect user text data (e.g., email) with built-in validation feedback. It displays a label above the input, applies visual focus and error states to the input field (red border and shadow when invalid), and shows an error message text beneath the input when the field is empty or invalid. It is suitable for forms requiring inline validation UI. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | Focused | Input field is focused by the user | Applies a soft box shadow (rgba(216,211,212,0.5), spread 3) around the input field | | Error / Empty | Input field's data is empty (mandatory field not filled) | Input border changes to red (rgba(251,44,54,1)) and a red box shadow (rgba(251,44,54,0.2), spread 3) appears | | Disabled | Input is not clickable | Input opacity reduces to 50%, visually indicating a disabled state | | Error message hidden | Input field has a non-empty value | The error message text ('Email is invalid') becomes hidden/collapsed | | Mobile font size | Current page width is less than the built-in mobile breakpoint | Font size of label and error text adjusts to 14px for mobile screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 07 Source: https://docs.brikl.co/components/elements/inputs/input-07 A labeled text input with a leading icon, border, rounded corners, and focus/error states. ![Input 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-start-icon.jpg) ## Overview Input 07 is a styled text input component featuring a start icon (email icon) positioned inside the input container. It includes a visible label above the field and supports three visual states: focused (blue shadow), invalid (red border and shadow), and disabled (reduced opacity). The component is built as a group containing a label text, an icon, and an actual input element arranged in a column/row layout with padding and rounded borders. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------ | | Focused | Input element receives focus | Adds a soft box shadow (rgba(216,211,212,0.5)) around the input container to indicate active focus | | Invalid | Input value fails validation | Border turns red (rgba(251,44,54,1)) and a red box shadow (rgba(251,44,54,0.2)) appears around the container | | Disabled | Input is not clickable | Entire input group opacity is reduced to 50%, visually indicating a non-interactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 08 Source: https://docs.brikl.co/components/elements/inputs/input-08 Horizontal input group with inline 'https://' text add-on prefix, bordered and rounded container. ![Input 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-start-inline-addon.jpg) ## Overview Input 08 is a URL-style text input field featuring a start inline add-on label ('https\://') displayed inside the input container. It is designed to guide users when entering web addresses or slugs, with a placeholder like 'brikl.co'. The component includes visual states for focus (box shadow highlight), validation error (red border and shadow), and disabled/non-clickable (reduced opacity), making it suitable for forms requiring structured URL input. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | Focused | Input field receives focus | Applies a soft box shadow (rgba(216,211,212,0.5), spread 3) around the input group container | | Invalid | Input field value fails validation | Border turns red (rgba(251,44,54,1)) and a red box shadow (rgba(251,44,54,0.2), spread 3) is applied to the container | | Disabled / Not Clickable | Input field is not clickable | Container opacity is reduced to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 09 Source: https://docs.brikl.co/components/elements/inputs/input-09 Horizontal input group with inline currency prefix (€) and suffix (EUR) labels, rounded border styling. ![Input 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-inline-addons.jpg) ## Overview Input 09 is a styled numeric input field with inline add-ons, designed for currency or numeric data entry. It features a left-side currency symbol (€) and a right-side currency label (EUR) embedded within the input container, providing clear context for the value being entered. The component supports focus, validation error, and disabled visual states, making it suitable for financial forms or any scenario requiring formatted numeric input. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | Focused | Input field is focused by the user | Adds a soft box shadow (rgba(216,211,212,0.5)) around the input group to indicate active focus | | Invalid | Input field value fails validation | Border color changes to red (rgba(251,44,54,1)) and a red box shadow (rgba(251,44,54,0.2)) appears around the group | | Disabled | Input field is not clickable | The input group opacity is reduced to 50%, visually indicating a disabled state | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Font size of label and add-on text elements adjusts to 14px for mobile screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 10 Source: https://docs.brikl.co/components/elements/inputs/input-10 Vertical input group with label, prefix add-on badge, and styled text input field. ![Input 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-start-addon.jpg) ## Overview Input 10 is a labeled text input component featuring a start add-on (prefix) element displaying 'https\://' alongside the input field. It is designed for URL-style inputs where a fixed prefix is shown visually separated but attached to the left side of the input. The component includes focus, validation error, and disabled states with smooth transitions, making it suitable for forms requiring prefixed text entry. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | Focused | Input element receives focus | Adds a colored box shadow (rgba(216,211,212,0.5)) with spread of 3 and solid left border to highlight the active input | | Invalid | Input fails validation (isnt\_valid) | Applies a red-tinted box shadow (rgba(251,44,54,0.2)) with spread of 3 to indicate an error state | | Disabled | Input is not clickable (isnt\_clickable) | Reduces opacity to 50% to visually indicate the input is non-interactive | | Mobile Breakpoint | Current page width is less than built-in-mobile breakpoint | Adjusts font size to 14px for label and add-on text elements | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 11 Source: https://docs.brikl.co/components/elements/inputs/input-11 Horizontal input field with a right-side text add-on badge, labeled above, in a column layout. ![Input 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-end-addon.jpg) ## Overview Input 11 is a styled text input component featuring an end add-on (e.g., '.com') appended to the right side of the input field. It includes a label above the input, a placeholder, rounded corners on the appropriate sides to visually merge the input and add-on into a single unit, and multiple visual states for focus, validation error, and disabled interactions. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------- | | Focused | Input element is focused by the user | Applies a colored box shadow and solid border on the left to highlight the active input | | Invalid | Input fails validation (isnt\_valid) | Applies a red-tinted box shadow to indicate an error state | | Disabled | Input is not clickable (isnt\_clickable) | Reduces opacity to 50% to visually indicate the input is inactive | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Adjusts font size on text elements to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 12 Source: https://docs.brikl.co/components/elements/inputs/input-12 Horizontal input field with inline start euro symbol and end EUR currency label, bordered container. ![Input 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-inline-start-and-end-addon.jpg) ## Overview Input 12 is a styled currency input component featuring inline start and end add-ons. It displays a euro sign (€) on the left and a currency label (EUR) on the right, wrapped in a rounded bordered container. It supports float number input format and includes visual states for focus, validation error, and disabled interaction, making it ideal for financial or pricing forms. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Focused | Input element receives focus | Adds a soft box shadow (rgba(216,211,212,0.5)) around the input container to indicate active focus | | Invalid | Input fails validation (isnt\_valid) | Border color changes to red (rgba(251,44,54,1)) and a red box shadow (rgba(251,44,54,0.2)) appears around the container | | Disabled | Input is not clickable (isnt\_clickable) | Container opacity reduces to 50%, visually indicating the input is disabled | | Mobile Responsive | Current page width is less than built-in mobile breakpoint | Font size of label and add-on text elements adjusts to 14px for mobile screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 13 Source: https://docs.brikl.co/components/elements/inputs/input-13 Horizontal input field with attached 'Send' button, label above, clean bordered style. ![Input 13](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-end-button.jpg) ## Overview Input 13 is a labeled email input component with an integrated end button. It features a text label ('Input W/ End Button'), a styled text input field with placeholder 'Email', and a 'Send' button with an arrow icon attached to the right side of the input. The layout uses a column container for the label and a row container for the input-button pair, making it suitable for email capture, search, or form submission use cases. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 13** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | --------------------------------- | --------------------------------------------------------------------------------------- | | Input Focused | Input field receives focus | Border color changes to rgba(216,211,212,1) with a soft box shadow spread of 3px | | Input Invalid | Input field value is not valid | Red-tinted box shadow (rgba(251,44,54,0.2)) with spread of 3px appears around the input | | Input Disabled | Input is not clickable | Input opacity reduces to 50% | | Button Hovered | Mouse hovers over the Send button | Button background color changes to rgba(245,244,244,1) | | Button Disabled | Send button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 14 Source: https://docs.brikl.co/components/elements/inputs/input-14 Horizontal input field with an attached send icon button on the right side. ![Input 14](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-end-button-icon.jpg) ## Overview Input 14 is a styled text input component with an integrated end icon button (Send), designed to allow users to type content and trigger an action directly from the input row. It features a label above, a text input on the left, and a bordered icon button on the right that shares the input's border for a seamless connected appearance. Common use cases include email subscription forms, search bars, or message-sending interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 14** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | Input Focused | User clicks or focuses the input field | A colored box shadow (rgba(216,211,212,0.5)) with spread 3 appears around the input, and the left border becomes solid with rgba(216,211,212,1) | | Input Invalid | Input fails validation (isnt\_valid) | A red-tinted box shadow (rgba(251,44,54,0.2)) with spread 3 appears around the input | | Input Disabled | Input is not clickable (isnt\_clickable) | Input opacity reduces to 50% | | Button Hovered | User hovers over the Send button | Button background changes to rgba(245,244,244,1) and icon color darkens to rgba(27,23,24,1) | | Button Disabled | Button is not clickable (isnt\_clickable) | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 15 Source: https://docs.brikl.co/components/elements/inputs/input-15 Horizontal input field paired with a send button, stacked below a label text. ![Input 15](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-button.jpg) ## Overview Input 15 is an 'Input with Button' component that combines a text input field (pre-configured for email) with an adjacent send button. It is designed for use cases like newsletter subscriptions, search bars, or email capture forms. The component includes a descriptive label above the input-button row and handles focused, invalid, and disabled states for the input, as well as hover and disabled states for the button. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 15** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Input Focused | User clicks or tabs into the input field | A soft shadow (rgba(216,211,212,0.5)) spreads around the input border to indicate active focus | | Input Invalid | Input value fails validation (isnt\_valid) | Border turns red (rgba(251,44,54,1)) and a red shadow (rgba(251,44,54,0.2)) appears around the input | | Input Disabled | Input is not clickable (isnt\_clickable) | Input opacity reduces to 50%, visually indicating it is inactive | | Button Hovered | User hovers over the Send button | Button background changes to rgba(245,244,244,1), a light grey tint | | Button Disabled | Button is not clickable (isnt\_clickable) | Button opacity reduces to 50%, visually indicating it is inactive | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Label text font size adjusts to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 16 Source: https://docs.brikl.co/components/elements/inputs/input-16 Vertical column group with label, bordered input field, and live character counter text. ![Input 16](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-characters-limit.jpg) ## Overview Input 16 is a text input component with a 50-character limit. It displays a label above the input field and a live character counter (e.g., '0/50') below or beside the input. The component includes visual states for focused, invalid, and disabled conditions, making it suitable for form fields where input length needs to be constrained and communicated to the user. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 16** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ---------------------------------- | ----------------------------------------------------------------------------------------------- | | Focused | Input field is focused by the user | Adds a soft box shadow (rgba(216,211,212,0.5)) around the input group container | | Invalid | Input value fails validation | Border color changes to red (rgba(251,44,54,1)) and adds a red box shadow (rgba(251,44,54,0.2)) | | Disabled | Input is not clickable | Container opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 17 Source: https://docs.brikl.co/components/elements/inputs/input-17 Vertical column group with a label, text input, and dynamic character countdown text below. ![Input 17](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-characters-left.jpg) ## Overview Input 17 is a text input component with a real-time character countdown feature. It displays a label above the input field and shows the number of remaining characters (out of a 50-character limit) below it. The component includes focus and validation states with visual feedback via box shadows and border color changes, making it ideal for forms where character limits need to be communicated clearly to the user. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 17** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Focused | Input is focused by the user | Adds a soft box shadow (rgba(216,211,212,0.5)) with spread of 3 around the input field | | Invalid | Input value is not valid | Border color changes to red (rgba(251,44,54,1)) and a red-tinted box shadow appears around the input | | Disabled | Input is not clickable | Input opacity reduces to 50%, indicating a disabled state | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Font size of label and character count text adjusts to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 18 Source: https://docs.brikl.co/components/elements/inputs/input-18 Horizontal number input with minus and plus buttons on each side, rounded borders. ![Input 18](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-plus-and-minus-buttons.jpg) ## Overview Input 18 is a numeric stepper component featuring a centered number input field flanked by a minus button on the left and a plus button on the right. It is designed for integer number entry with increment/decrement controls, styled with border separation, box shadows, and hover/focus/validation states for a polished form UI experience. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 18** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | Input Focused | When the input field gains focus | Outer group displays a soft outset box shadow (rgba(216,211,212,0.5), spread 3) to highlight the active field | | Input Invalid | When the input field value is not valid | Outer group removes box shadow; input field shows a red-tinted box shadow (rgba(251,44,54,0.2), spread 3) | | Input Disabled | When the input is not clickable | Input field opacity reduces to 50% | | Plus Button Hovered | When the plus button is hovered | Plus button background changes to rgba(245,244,244,1) | | Plus Button Disabled | When the plus button is not clickable | Plus button opacity reduces to 50% | | Minus Button Hovered | When the minus button is hovered | Minus button background changes to rgba(245,244,244,1) | | Minus Button Disabled | When the minus button is not clickable | Minus button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 19 Source: https://docs.brikl.co/components/elements/inputs/input-19 Currency input field with up/down chevron buttons arranged horizontally with a label above. ![Input 19](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-chevrons.jpg) ## Overview Input 19 is a numeric currency input component with increment/decrement chevron buttons. It features a styled text input for currency values alongside two vertically stacked arrow buttons (up and down carets) that allow users to adjust the value. The component includes a label, focus state with shadow highlight, validation error state with red border, and a disabled/non-clickable state with reduced opacity. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 19** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------- | | Focused | When the input field is focused by the user | Adds a soft box shadow (rgba(216,211,212,0.5) with 3px spread) around the input group | | Invalid | When the input field value is not valid | Border turns red (rgba(251,44,54,1)) and a red-tinted box shadow appears around the input group | | Disabled (Input Group) | When the input element is not clickable | The entire input group opacity is reduced to 50% | | Up Button Hovered | When the up chevron button is hovered | Background color changes to rgba(245,244,244,1) with ease transition | | Up Button Disabled | When the up chevron button is not clickable | Opacity of the up button is reduced to 50% | | Down Button Hovered | When the down chevron button is hovered | Background color changes to rgba(245,244,244,1) with ease transition | | Down Button Disabled | When the down chevron button is not clickable | Opacity of the down button is reduced to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 20 Source: https://docs.brikl.co/components/elements/inputs/input-20 Input field with overlapping floating label positioned above the border, inside a group container. ![Input 20](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-overlapping-label.jpg) ## Overview Input 20 is a styled text input component featuring an overlapping label design where the label text visually floats above the input field's border. It includes focus and validation states with box shadow feedback, and is suitable for forms requiring clear field identification such as email or text entry. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 20** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------- | | Focused | Input element is focused | Adds a soft box shadow (rgba(216,211,212,0.5)) with 3px spread around the input | | Invalid | Input value is not valid | Border color changes to red (rgba(251,44,54,1)) and a red-tinted box shadow appears | | Disabled | Input is not clickable | Opacity reduces to 50%, visually indicating the field is inactive | | Mobile Breakpoint | Page width is less than built-in mobile breakpoint | Label font size adjusts to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 21 Source: https://docs.brikl.co/components/elements/inputs/input-21 Vertical column group with an inset label above a bordered input field, rounded container. ![Input 21](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-inset-label.jpg) ## Overview Input 21 is a labeled input field component featuring an inset label displayed above the input box within a styled container group. It is designed for form use cases such as collecting email or text data, with visual feedback states for focus, validation errors, and disabled interactions. The container has a subtle shadow, rounded corners, and smooth transitions for a polished user experience. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 21** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | Focused | Input field receives focus (is\_focused) | Adds a soft box shadow (rgba(216,211,212,0.5), spread 3) around the container group | | Invalid | Input field fails validation (isnt\_valid) | Changes border color to red (rgba(251,44,54,1)) and adds a red-tinted box shadow (rgba(251,44,54,0.2), spread 3) | | Disabled | Input field is not clickable (isnt\_clickable) | Reduces the container opacity to 50%, visually indicating a disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 22 Source: https://docs.brikl.co/components/elements/inputs/input-22 Two-input range group with 'From' and 'To' numerical fields, label, and rounded borders. ![Input 22](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-range.jpg) ## Overview Input 22 is a range input component designed to capture a numerical range from the user. It consists of a labeled group containing two side-by-side input fields: one for the starting value ('From') and one for the ending value ('To'). The inputs share a connected border style, creating a unified range control. It supports validation states, focus highlights, and disabled appearance, making it suitable for filter panels, search forms, or any UI requiring a min/max numerical range entry. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 22** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | Focused | User clicks or focuses on the 'From' or 'To' input field | A soft border-color highlight and spread box shadow (rgba(216,211,212,0.5)) appears around the focused input | | Invalid | Input fails validation (isnt\_valid condition) | A red-tinted box shadow (rgba(251,44,54,0.2)) with spread appears around the invalid input | | Disabled | Input is not clickable (isnt\_clickable condition) | The input opacity is reduced to 50%, visually indicating it is inactive | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | The label text font size adjusts to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Input 23 Source: https://docs.brikl.co/components/elements/inputs/input-23 Password input field with strength indicator, eye-slash icon, and regex validation checklist below. ![Input 23](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Inputs/input-with-password-strength-indicator.jpg) ## Overview A password input component that includes a styled text input with a visibility toggle icon, and a dynamic password strength indicator that checks for minimum character requirements using regex validation. It provides real-time visual feedback (color changes, check/x icons) as the user types, helping guide them to meet password criteria. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Input 23** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------- | | Focused | Input field is focused | Box shadow with color rgba(216,211,212,0.5) appears around the input group | | Invalid | Input field value is not valid | Border turns red (rgba(251,44,54,1)) and red box shadow appears around the input group | | Disabled | Input field is not clickable | Input group opacity reduces to 50% | | 8 Characters Met | Input value length is greater than or equal to 8 | Check icon turns green and validation text color changes to green (rgba(0,153,102,1)) | | Mobile Breakpoint | Current page width is less than built-in mobile breakpoint | Font size adjusts to 14px on label and validation text elements | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Pagination 01 Source: https://docs.brikl.co/components/elements/paginations/pagination-01 Horizontal pagination bar with Previous and Next buttons, side by side, minimal style. ![Pagination 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Paginations/pagination-buttons-previous-and-next-filled.png) ## Overview Pagination 01 is a simple navigation component featuring two buttons — Previous and Next — arranged in a row with space between them. It allows users to navigate between pages of content. The buttons include icons (caret-left and caret-right) and support disabled and hover states to communicate interactivity clearly. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Pagination 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ----------------------------------------- | ------------------------------------------------------------------------------------- | | Previous Button Disabled | When the Previous button is not clickable | Button opacity is reduced to 50%, indicating it is inactive (e.g., on the first page) | | Next Button Hovered | When the Next button is hovered | Background color changes to rgba(245, 244, 244, 1), a light gray | | Next Button Disabled | When the Next button is not clickable | Button opacity is reduced to 50%, indicating it is inactive (e.g., on the last page) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Pagination 02 Source: https://docs.brikl.co/components/elements/paginations/pagination-02 Horizontal pagination bar with Previous and Next buttons aligned space-between. ![Pagination 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Paginations/pagination-buttons-previous-and-next.png) ## Overview Pagination 02 is a simple navigation component featuring two buttons — 'Previous' and 'Next' — arranged in a horizontal row with space-between alignment. It is designed to allow users to navigate between pages of content. The Previous button uses a left caret icon and the Next button uses a right caret icon, both styled with a clean, minimal appearance using the Inter font and a neutral color palette. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Pagination 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | Previous Button Disabled | When the Previous button is not clickable (isnt\_clickable condition) | Opacity of the Previous button is reduced to 50%, indicating it is inactive | | Next Button Hovered | When the Next button is hovered (is\_hovered condition) | Background color of the Next button changes to rgba(245,244,244,1) with a background style of bgcolor | | Next Button Disabled | When the Next button is not clickable (isnt\_clickable condition) | Opacity of the Next button is reduced to 50%, indicating it is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Pagination 03 Source: https://docs.brikl.co/components/elements/paginations/pagination-03 Horizontal pagination bar with Previous button, page indicator text, and Next button. ![Pagination 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Paginations/pagination-with-icons-filled-and-number-page.png) ## Overview Pagination 03 is a navigation component designed to help users move between pages of content. It features a Previous button with a left caret icon, a centered page indicator text (e.g., 'Page 1 of 10'), and a Next button with a right caret icon. The layout is a horizontal row with space-between alignment, making it suitable for both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Pagination 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------------------------------ | -------------------------------------------------------------------- | | Previous Button Disabled | Element is not clickable (e.g., on the first page) | Previous button opacity is reduced to 50%, indicating it is inactive | | Next Button Hovered | User hovers over the Next button | Next button background changes to rgba(245, 244, 244, 1) | | Next Button Disabled | Element is not clickable (e.g., on the last page) | Next button opacity is reduced to 50%, indicating it is inactive | | Mobile Font Size | Page width is less than the built-in mobile breakpoint | Page indicator text font size reduces from 16px to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Pagination 04 Source: https://docs.brikl.co/components/elements/paginations/pagination-04 Horizontal pagination bar with Previous button, page indicator text, and Next button. ![Pagination 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Paginations/pagination-with-icons-and-number-page.png) ## Overview Pagination 04 is a simple, minimal pagination component featuring a Previous button, a centered page count text (e.g., 'Page 1 of 10'), and a Next button arranged in a horizontal row with space-between alignment. It provides straightforward navigation between pages and adapts its font size on mobile screens. Buttons become visually disabled (50% opacity) when not clickable, and the Next button shows a hover state. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Pagination 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | | Previous Button Disabled | When the Previous button is not clickable (e.g., on the first page) | The Previous button opacity is reduced to 50%, visually indicating it is inactive | | Next Button Hover | When the user hovers over the Next button | The Next button background changes to rgba(245,244,244,1) with bgcolor background style | | Next Button Disabled | When the Next button is not clickable (e.g., on the last page) | The Next button opacity is reduced to 50%, visually indicating it is inactive | | Mobile Font Size | When the page width is less than the built-in mobile breakpoint | The page indicator text font size reduces from 16px to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Pagination 05 Source: https://docs.brikl.co/components/elements/paginations/pagination-05 Horizontal pagination bar with previous/next buttons and centered page count text. ![Pagination 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Paginations/pagination-number-page-and-buttons-spaced.png) ## Overview Pagination 05 is a navigation component that allows users to move between pages. It displays the current page position (e.g., 'Page 1 of 10') alongside Previous and Next buttons with icons. The Previous button is disabled on the first page, and both buttons have hover and disabled states for clear visual feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Pagination 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------------------------------ | -------------------------------------------------- | | Next Button Hovered | User hovers over the Next button | Background color changes to rgba(245, 244, 244, 1) | | Next Button Disabled | Button is not clickable (e.g., last page reached) | Next button opacity reduces to 50% | | Previous Button Disabled | Button is not clickable (e.g., on first page) | Previous button opacity reduces to 50% | | Mobile Breakpoint | Page width is less than the built-in mobile breakpoint | Page text font size reduces from 16px to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Pagination 06 Source: https://docs.brikl.co/components/elements/paginations/pagination-06 Horizontal pagination bar with previous/next buttons and a centered page count text label. ![Pagination 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Paginations/pagination-with-fouble-chevrons.png) ## Overview Pagination 06 is a navigation component designed to help users move between pages of content. It features ghost-style Previous and Next buttons (with First/Last page variants using caret icons), and a centered text element displaying the current page and total pages (e.g., 'Page 1 of 10'). The layout adapts for mobile screens with responsive font sizing, making it suitable for both web and mobile applications. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Pagination 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------ | | Button Disabled (Previous/First Page) | Button is not clickable (e.g., user is on the first page) | Opacity of the Previous and First Page buttons is reduced to 50% | | Button Disabled (Next/Last Page) | Button is not clickable (e.g., user is on the last page) | Opacity of the Next and Last Page buttons is reduced to 50% | | Hover (Next) | User hovers over the Next or Last Page button | Background changes to light gray (rgba(245,244,244,1)) with a smooth ease transition | | Mobile Font Size | Page width is less than the built-in mobile breakpoint | Page counter text font size reduces from 16px to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Popup 01 Source: https://docs.brikl.co/components/elements/popups/popup-01 Centered confirmation popup with title, description text, and Cancel/Okay action buttons. ![Popup 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-alert-bis.png) ## Overview Popup 01 is a confirmation dialog component that presents users with a prompt asking them to confirm an action. It contains a message group with a bold title ('Are you sure?') and a descriptive subtitle, along with an action group featuring a Cancel button (light style) and an Okay button (dark style). It is designed for web use and includes workflows to show and hide the popup based on button interactions. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------- | | Cancel Button Hovered | User hovers over the Cancel button | Cancel button background color changes to rgba(245, 244, 244, 1) | | Cancel Button Not Clickable | Cancel button is disabled/not clickable | Cancel button opacity reduces to 50% | | Okay Button Hovered | User hovers over the Okay button | Okay button opacity reduces to 90% | | Okay Button Not Clickable | Okay button is disabled/not clickable | Okay button opacity reduces to 50% | | Mobile Breakpoint - Title | Current page width is less than the built-in mobile breakpoint | Title text font size changes to 14px | | Mobile Breakpoint - Subtitle | Current page width is less than the built-in mobile breakpoint | Subtitle text font size changes to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------------- | -------------------------- | | BT - Cancel (Popup 01) is clicked | Hides the Popup 01 element | | A separate trigger element (bTSim) is clicked | Shows the Popup 01 element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 02 Source: https://docs.brikl.co/components/elements/popups/popup-02 Modal popup with warning icon, confirmation message, and Cancel/Confirm action buttons. ![Popup 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-alert-with-icon-basic-bis.png) ## Overview Popup 02 is a confirmation dialog component designed to prompt users before performing a destructive or important action, such as deleting an account. It features a warning icon, a bold heading ('Are you sure?'), a descriptive message, and two action buttons: Cancel (dismisses the popup) and Confirm (proceeds with the action). The layout is clean and minimal with a white card, rounded corners, and subtle shadow styling. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------ | -------------------------------------------------------------- | ---------------------------------------------------------------------- | | Cancel Button Hovered | User hovers over the Cancel button | Background color changes to rgba(245, 244, 244, 1) — a light grey tint | | Cancel Button Disabled | Cancel button is not clickable | Button opacity reduces to 50%, visually indicating it is inactive | | Confirm Button Hovered | User hovers over the Confirm button | Button opacity reduces to 90%, giving a subtle dimming feedback | | Confirm Button Disabled | Confirm button is not clickable | Button opacity reduces to 50%, visually indicating it is inactive | | Mobile Breakpoint - Title Text | Current page width is less than the built-in mobile breakpoint | Heading text font size reduces to 14px | | Mobile Breakpoint - Body Text | Current page width is less than the built-in mobile breakpoint | Body description text font size reduces to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------------- | -------------------------- | | BT - Cancel (Popup 02) is clicked | Hides the Popup 02 element | | An external trigger button (bTUFy) is clicked | Shows the Popup 02 element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 03 Source: https://docs.brikl.co/components/elements/popups/popup-03 Centered popup with icon, title, description text, and Cancel/Confirm action buttons. ![Popup 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-alert-with-icon-success-bis.png) ## Overview Popup 03 is a confirmation dialog component featuring a success-style icon badge, a bold title, a descriptive message, and two action buttons (Cancel and Confirm). It is designed to inform users of a completed action and prompt them to acknowledge or dismiss the notification, making it ideal for confirmation flows such as publishing content. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------- | | Cancel Button Hovered | User hovers over the Cancel button | Cancel button background changes to rgba(245, 244, 244, 1) | | Cancel Button Not Clickable | Cancel button is set to non-clickable | Cancel button opacity reduces to 50% | | Confirm Button Hovered | User hovers over the Confirm button | Confirm button opacity reduces to 90% | | Confirm Button Not Clickable | Confirm button is set to non-clickable | Confirm button opacity reduces to 50% | | Mobile Responsive Text | Current page width is less than the built-in mobile breakpoint | Title and description text font size reduces to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------------------------- | -------------------------- | | Cancel button (BT - Cancel) is clicked | Hides the Popup 03 element | | A separate trigger button (element bTUGV) is clicked | Shows the Popup 03 element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 04 Source: https://docs.brikl.co/components/elements/popups/popup-04 Centered popup with icon, title, description text, and two action buttons in a card layout. ![Popup 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-alert-with-icon-warning-bis.png) ## Overview Popup 04 is an unsaved changes confirmation dialog. It presents users with a warning message indicating they have unsaved changes, along with two action buttons: 'Discard' to dismiss the changes and close the popup, and 'Save Changes' to confirm. It is designed as a modal overlay with a clean white card, an orange icon badge, and a structured layout suitable for form or editor workflows. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------ | | Discard Button Hovered | Mouse hovers over the Discard button | Background color of the Discard button changes to rgba(245, 244, 244, 1) | | Discard Button Not Clickable | Discard button is set to non-clickable | Discard button opacity reduces to 50% | | Save Changes Button Hovered | Mouse hovers over the Save Changes button | Save Changes button opacity reduces to 90% | | Save Changes Button Not Clickable | Save Changes button is set to non-clickable | Save Changes button opacity reduces to 50% | | Mobile Responsive Text | Current page width is less than the built-in mobile breakpoint | Title and description text font size reduces to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------- | -------------------------- | | BT - Discard button clicked | Hides the Popup 04 element | | External trigger button (bTUHr) clicked | Shows the Popup 04 element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 05 Source: https://docs.brikl.co/components/elements/popups/popup-05 Centered delete confirmation popup with icon, message, cancel and delete action buttons. ![Popup 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-alert-with-icon-destructive-bis.png) ## Overview Popup 05 is a delete confirmation dialog component. It presents users with a warning icon, a title, and a descriptive message asking them to confirm a destructive action. It includes a Cancel button to dismiss the popup and a red Delete button to proceed. The component is designed for web applications and handles show/hide workflows to control its visibility. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------- | ---------------------------------- | -------------------------------------------------- | | Cancel Button Hovered | User hovers over the Cancel button | Background color changes to rgba(245, 244, 244, 1) | | Cancel Button Disabled | Cancel button is not clickable | Opacity reduces to 50% | | Delete Button Hovered | User hovers over the Delete button | Opacity reduces to 90% | | Delete Button Disabled | Delete button is not clickable | Opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------- | -------------------------- | | BT - Cancel (Popup 05) clicked | Hides the Popup 05 element | | External trigger button (bTUIx) clicked | Shows the Popup 05 element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 06 Source: https://docs.brikl.co/components/elements/popups/popup-06 Modal popup with icon, title, message, checkbox, cancel and confirm buttons in a clean layout. ![Popup 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-alert-horizontal-success-bis.png) ## Overview Popup 06 is a confirmation modal dialog that displays a success-style notification with a green check icon, a title, a descriptive message, a 'Don't show again' checkbox toggle, and two action buttons (Cancel and Confirm). It is designed to inform users of a completed action and allow them to confirm or dismiss, with an optional preference to suppress future appearances. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------- | | Cancel Button Hovered | User hovers over the Cancel button | Cancel button background changes to rgba(245, 244, 244, 1) | | Cancel Button Disabled | Cancel button is not clickable | Cancel button opacity reduces to 50% | | Confirm Button Hovered | User hovers over the Confirm button | Confirm button opacity reduces to 90% | | Confirm Button Disabled | Confirm button is not clickable | Confirm button opacity reduces to 50% | | Checkbox Checked | custom.show\_again\_ state is false on the popup element | Checkbox icon changes to a filled checkmark with dark background (rgba(11,8,9,1)) | | Mobile Responsive Text | Current page width is less than mobile breakpoint | Text elements reduce font size to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | | Cancel button (BT - Cancel) is clicked | Hides the popup element (Popup 06) | | Checkbox (Checkbox - Don't Show Again) is clicked when custom.show\_again\_ is true | Sets custom state custom.show\_again\_ to false on the popup element | | Checkbox (Checkbox - Don't Show Again) is clicked when custom.show\_again\_ is false | Sets custom state custom.show\_again\_ to true on the popup element | | A separate trigger button (element bTULN) is clicked | Shows the popup element (Popup 06) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 07 Source: https://docs.brikl.co/components/elements/popups/popup-07 Modal popup with icon, title, message, checkbox, and two action buttons in clean card layout. ![Popup 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-alert-horizontal-warning-bis.png) ## Overview Popup 07 is a confirmation dialog component designed to alert users about unsaved changes. It features a warning icon, a title, a descriptive message, a 'Don't show again' checkbox toggle, and two action buttons: 'Discard' and 'Save Changes'. It is intended to be triggered programmatically and includes workflow logic for dismissing the popup, saving changes, and toggling a persistent preference state. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------- | | Discard Button Hovered | Mouse hover over the Discard button | Background color changes to rgba(245, 244, 244, 1) | | Discard Button Disabled | Discard button is not clickable | Button opacity reduces to 50% | | Save Changes Button Hovered | Mouse hover over the Save Changes button | Button opacity reduces to 90% | | Save Changes Button Disabled | Save Changes button is not clickable | Button opacity reduces to 50% | | Checkbox Checked | Custom state 'show\_again\_' on the Popup element is true | Checkbox icon changes to a filled checkmark with dark background | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------------------- | ------------------------------------------------------ | | BT - Discard button clicked | Hides the Popup 07 element | | Checkbox icon clicked (when show\_again\_ is true) | Sets custom state 'show\_again\_' on Popup 07 to false | | Checkbox icon clicked (when show\_again\_ is false) | Sets custom state 'show\_again\_' on Popup 07 to true | | Trigger element (bTUMK) clicked | Shows the Popup 07 element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 08 Source: https://docs.brikl.co/components/elements/popups/popup-08 Delete confirmation popup with icon, message, cancel button, delete button, and don't show again checkbox. ![Popup 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-alert-horizontal-destructive-bis.png) ## Overview Popup 08 is a delete confirmation modal designed to prompt users before performing a destructive action. It includes a red trash icon, a title and description message, a cancel button, a red delete button, and a 'Don't show again' checkbox with toggle state. It is intended for web applications and provides a clear, styled confirmation flow with interactive states and workflow actions. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | --------------------------------------------- | ----------------------------------------------------------- | | Cancel Button Hovered | User hovers over the Cancel button | Background color changes to rgba(245, 244, 244, 1) | | Cancel Button Disabled | Cancel button is not clickable | Cancel button opacity reduces to 50% | | Delete Button Hovered | User hovers over the Delete button | Delete button opacity reduces to 90% | | Delete Button Disabled | Delete button is not clickable | Delete button opacity reduces to 50% | | Don't Show Again Checked | Custom state 'show\_again\_' on popup is true | Checkbox icon changes to a checkmark with a dark background | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------------------------------------- | ------------------------------------------------------- | | BT - Cancel (Popup 08) clicked | Hides the popup element (bTUNv) | | Checkbox - Don't Show Again clicked (when show\_again\_ is true) | Sets custom state 'show\_again\_' to false on the popup | | Checkbox - Don't Show Again clicked (when show\_again\_ is false) | Sets custom state 'show\_again\_' to true on the popup | | Element bTUNp clicked | Shows the popup element (bTUNv) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 09 Source: https://docs.brikl.co/components/elements/popups/popup-09 Centered popup with logo, title, description, email input field, and subscribe button. ![Popup 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-newsletter-bis.png) ## Overview Popup 09 is a newsletter subscription modal component designed for web applications. It features a branded icon, a headline ('Never miss an update'), a subtitle, an email input field with an at-sign icon, and a dark 'Subscribe' button. The popup can be shown or hidden via workflow triggers, making it suitable for capturing email leads with a clean, minimal design. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------- | | Input Focused | Email input field receives focus | A soft box shadow (rgba(216,211,212,0.5)) appears around the input container to indicate active focus | | Input Invalid | Email input field fails validation | Input container border turns red (rgba(251,44,54,1)) and a red-tinted box shadow appears to signal an error | | Input Disabled | Email input field is not clickable | Input container opacity reduces to 50% to indicate a disabled state | | Button Hovered | Subscribe button is hovered | Button opacity reduces to 90% for a subtle hover feedback | | Button Disabled | Subscribe button is not clickable | Button opacity reduces to 50% to indicate it is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------- | ---------------------------------- | | Close button (bTURa) clicked | Hides the Popup 09 element (bTUPX) | | Open/trigger button (bTUPR) clicked | Shows the Popup 09 element (bTUPX) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 10 Source: https://docs.brikl.co/components/elements/popups/popup-10 Centered popup with title, textarea input, send feedback button, and close icon. ![Popup 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-feedback-bis.png) ## Overview Popup 10 is a feedback collection modal that presents users with a title, a brief description with documentation links, a multiline text input, and a 'Send feedback' submit button. It includes a close icon to dismiss the popup and is triggered by an external button element. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------ | ------------------------------------------- | ---------------------------------------------------- | | Button Hovered | User hovers over the 'Send feedback' button | Button opacity reduces to 90% | | Button Disabled | Button is not clickable | Button opacity reduces to 50% | | Textarea Focused | User clicks/focuses on the multiline input | A soft box shadow appears around the textarea border | | Textarea Invalid | Input fails validation | Border turns red and a red-tinted box shadow appears | | Textarea Disabled | Textarea is not clickable | Textarea opacity reduces to 50% | | Close Icon Hovered | User hovers over the close icon | Close icon opacity increases to 100% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------- | -------------------------- | | Close icon (Icon - Close) is clicked | Hides the Popup 10 element | | Trigger button (external element bTURt) is clicked | Shows the Popup 10 element | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 11 Source: https://docs.brikl.co/components/elements/popups/popup-11 Popup with a question title and a horizontal radio button group for numeric rating selection. ![Popup 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-rating-bis.png) ## Overview Popup 11 is a survey-style popup component that presents users with a difficulty rating question ('How hard was it to set up your account?') and a segmented radio button group allowing selection of numeric values (0–8+). It uses custom states to track the selected radio item and visually highlights the active selection with a dark border, making it ideal for NPS or effort score surveys. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | Button Disabled | Button is not clickable | Button opacity reduces to 50% | | Button Selected | radio\_item\_ custom state on the Radio Group equals the button's item\_ custom state | Button border changes to dark color rgba(27,23,24,1) on all sides, indicating active selection | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------------------- | ------------------------------------------------------------------------------------------------ | | Button - 0 Radio (Popup 11) clicked | Sets radio\_item\_ custom state on the Radio Group to the item\_ value (0) of the clicked button | | Button - 1 Radio (Popup 11) clicked | Sets radio\_item\_ custom state on the Radio Group to the item\_ value (1) of the clicked button | | Button - 8 Radio (Popup 11) clicked | Sets radio\_item\_ custom state on the Radio Group to the item\_ value (8) of the clicked button | | Additional radio buttons clicked (values 2–7+) | Each sets radio\_item\_ custom state on the Radio Group to their respective item\_ numeric value | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 12 Source: https://docs.brikl.co/components/elements/popups/popup-12 Centered popup with logo, title, description, input fields, and a sign-up button. ![Popup 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-signup-bis.png) ## Overview Popup 12 is a sign-up modal component designed for web applications. It presents a branded registration form featuring a logo icon, a title ('Sign up Brikl'), a subtitle, and input fields for user details such as full name, email, and password, along with a styled sign-up button. It is intended to collect new user registration information and trigger authentication workflows. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | ----------------------------------------- | ------------------------------------------------------------- | | Button Hovered | User hovers over the Sign Up button | Button opacity reduces to 90% | | Button Disabled | Sign Up button is not clickable | Button opacity reduces to 50% | | Input Focused | User focuses on the Full Name input field | A soft box shadow appears around the input border | | Input Invalid | Input field fails validation | Border color changes to red and a red glow box shadow appears | | Input Disabled | Input field is not clickable | Input opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------- | -------------------------------------------------------------------------------------------------- | | Sign Up button (bTUYc) clicked | Triggers a Sign Up action using the email and password values from their respective input elements | | Close/Hide button (bTUYj) clicked | Hides the popup element (bTUYD) | | Open/Show button (bTUYv) clicked | Shows the popup element (bTUYD) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 13 Source: https://docs.brikl.co/components/elements/popups/popup-13 Centered login popup with logo, welcome text, email/password inputs, remember me checkbox, and sign in button. ![Popup 13](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-signin-bis.png) ## Overview Popup 13 is a login modal component that allows users to authenticate into their account. It includes a branded icon, a welcome title, a subtitle, email and password input fields, a remember me toggle, and a sign in button. It also supports showing/hiding the popup and handles the full login workflow including credential submission. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 13** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ----------------------------------------------------- | -------------------------------------------------------------- | | Button Hovered | User hovers over the Sign In button | Button opacity reduces to 90% | | Button Disabled | Sign In button is not clickable | Button opacity reduces to 50% | | Input Focused | User clicks into the Email input field | Box shadow appears around the input to indicate focus | | Input Invalid | Email input fails validation | Border turns red and a red box shadow appears around the input | | Input Disabled | Email input is not clickable | Input opacity reduces to 50% | | Remember Me Active | User clicks the remember me checkbox when it is false | Custom state 'remember\_me\_' is set to true | | Remember Me Inactive | User clicks the remember me checkbox when it is true | Custom state 'remember\_me\_' is set to false | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Sign In button (bTUaz) - ButtonClicked | Logs the user in using the email input value, password input value, and the remember me custom state | | Remember Me checkbox (bTUcT) - ButtonClicked (when remember\_me\_ is false) | Sets the custom state 'remember\_me\_' on the popup to true | | Remember Me checkbox (bTUcT) - ButtonClicked (when remember\_me\_ is true) | Sets the custom state 'remember\_me\_' on the popup to false | | Close button (bTUbj) - ButtonClicked | Hides the popup element (bTUag) | | Open/Show button (bTUbt) - ButtonClicked | Shows the popup element (bTUag) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Popup 14 Source: https://docs.brikl.co/components/elements/popups/popup-14 Centered popup with logo icon, title, description, text input, and cancel/confirm action buttons. ![Popup 14](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Popups/popup-delete-project-bis.png) ## Overview Popup 14 is a final confirmation dialog designed to prevent accidental destructive actions. It prompts the user to type a specific project name (e.g., 'Brikl') to confirm an irreversible operation such as deleting a project. It includes a branded icon, a title, a descriptive message, a validated text input, and Cancel/Confirm action buttons with hover and focus states. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Popup 14** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------- | ------------------------------------------------------ | --------------------------------------------------------------- | | Input Focused | User clicks or focuses on the project name input field | Input field displays a soft box shadow to indicate active focus | | Input Invalid | Input value does not pass validation | Input border turns red and a red-tinted box shadow appears | | Input Disabled | Input is not clickable | Input opacity is reduced to 50% | | Cancel Button Hovered | User hovers over the Cancel button | Cancel button background changes to a light gray color | | Cancel Button Disabled | Cancel button is not clickable | Cancel button opacity is reduced to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------- | -------------- | | Cancel button (BT - Cancel) clicked | Hides Popup 14 | | Secondary dismiss button (BT - Close/secondary) clicked | Hides Popup 14 | | Trigger button (BT - Open Popup) clicked | Shows Popup 14 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Radio 01 Source: https://docs.brikl.co/components/elements/radios/radio-01 Vertical column of three radio button options with icons and labels in a clean layout. ![Radio 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-simple.png) ## Overview Radio 01 is a custom radio button group component containing three selectable options (Option 1, Option 2, Option 3). It uses a custom state on the parent group to track which option is currently selected. Each option displays a circular icon and a text label arranged in a row. When an option is clicked, its item number is stored as the selected value, and the icon visually updates to show a filled dot, mimicking native radio button behavior. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------- | | Selected - Option 1 | User clicks the Option 1 group | The icon for Option 1 changes from an outlined circle to a filled dot icon with a dark background | | Selected - Option 2 | User clicks the Option 2 group | The icon for Option 2 changes from an outlined circle to a filled dot icon with a dark background | | Selected - Option 3 | User clicks the Option 3 group | The icon for Option 3 changes from an outlined circle to a filled dot icon with a dark background | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | GP - Option 1 (Radio 01) is clicked | Sets the parent group's custom state 'item\_' to the value of Option 1's custom state (1), marking it as selected | | GP - Option 2 (Radio 01) is clicked | Sets the parent group's custom state 'item\_' to the value of Option 2's custom state (2), marking it as selected | | GP - Option 3 (Radio 01) is clicked | Sets the parent group's custom state 'item\_' to the value of Option 3's custom state (3), marking it as selected | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Radio 02 Source: https://docs.brikl.co/components/elements/radios/radio-02 Vertical column layout with two radio options, each containing an icon button and label with description text. ![Radio 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-with-description.png) ## Overview Radio 02 is a custom radio button group component featuring two selectable options, each with a circular toggle icon, a bold label, and a descriptive subtitle. It uses custom states to track which option is currently selected, visually updating the selected radio icon when a user clicks an option. This component is ideal for forms or settings screens where users must choose one option from a list. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Option Selected | User clicks on a radio button group (Option 1 or Option 2) | The parent group's custom state 'radio\_item\_' is updated to match the clicked option's 'item\_' value, causing the corresponding radio icon to switch from an outlined circle to a filled dot icon with a dark background. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - Button Option 1 (Radio 02) is clicked | Sets the custom state 'radio\_item\_' on the parent group (GP - Radio 02) to the value of Option 1's custom state 'item\_' (value: 1), marking Option 1 as selected. | | GP - Button Option 2 (Radio 02) is clicked | Sets the custom state 'radio\_item\_' on the parent group (GP - Radio 02) to the value of Option 2's custom state 'item\_' (value: 2), marking Option 2 as selected. | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 03 Source: https://docs.brikl.co/components/elements/radios/radio-03 Vertical radio group with two options, each having label, description, and expansion input field. ![Radio 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-with-expansion.png) ## Overview Radio 03 is a customizable radio button group component featuring two selectable options. Each option includes a circular radio icon, a label, and a description text. Option 1 additionally contains an expandable input field that appears when selected. The component tracks the selected item via a custom state and supports conditional styling to indicate the active selection. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | Radio Option Selected | When the parent group's custom state 'radio\_item\_' equals the option's 'item\_' custom state value | The radio icon changes to a filled dot icon with a dark background, indicating the option is selected | | Expansion Input Visible | When Option 1 is selected (radio\_item\_ equals item\_ of Option 1) | The hidden input field beneath Option 1 becomes visible and receives focus | | Input Focused | When the expansion input field is focused | A soft box shadow appears around the input field | | Input Invalid | When the expansion input field fails validation | Border turns red and a red box shadow appears around the input | | Input Disabled | When the expansion input field is not clickable | Input opacity is reduced to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | | GP - Button Option 1 (Radio 03) is clicked | Sets the parent group's 'radio\_item\_' custom state to Option 1's 'item\_' value, then sets focus to the expansion input field | | GP - Button Option 2 (Radio 03) is clicked | Sets the parent group's 'radio\_item\_' custom state to Option 2's 'item\_' value | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 04 Source: https://docs.brikl.co/components/elements/radios/radio-04 Vertical radio group with two labeled options, each featuring an icon, title, sublabel, and description. ![Radio 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-with-sublabel-and-description.png) ## Overview Radio 04 is a customizable radio button group component containing two selectable options. Each option includes a circular radio icon, a bold label, a sublabel, and a descriptive text below. Selection is managed via a custom state on the parent group, toggling the icon appearance to indicate the active choice. It is ideal for forms or preference selections requiring visual clarity. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | Option Selected | User clicks on GP - Button Option 1 or GP - Button Option 2 | The radio icon changes from an empty circle to a filled dot (phosphor fill dot) with a dark background, indicating the selected option | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | GP - Button Option 1 (Radio 04) is clicked | Sets the custom state 'radio\_item\_' on the parent group (GP - Radio 04) to the 'item\_' value of Option 1 (1), marking it as selected | | GP - Button Option 2 (Radio 04) is clicked | Sets the custom state 'radio\_item\_' on the parent group (GP - Radio 04) to the 'item\_' value of Option 2 (2), marking it as selected | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 05 Source: https://docs.brikl.co/components/elements/radios/radio-05 Vertical radio button group with two bordered card options, each containing title, sublabel, description, and icon. ![Radio 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-with-sublabel-and-description-filled.png) ## Overview Radio 05 is a styled radio button component featuring two selectable card-style options. Each card contains a title, sublabel, description text, and a circular radio icon indicator. The component uses a custom state to track which option is selected, and visually highlights the selected card by changing its border color. It is suited for forms or preference selection flows where users must choose one option from a set. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------- | | Option 1 Selected | User clicks on Radio Option 1 card | Border color of Option 1 card changes to dark (rgba(27,23,24,1)) and the radio icon fills with a dot indicator | | Option 2 Selected | User clicks on Radio Option 2 card | Border color of Option 2 card changes to dark (rgba(27,23,24,1)) and the radio icon fills with a dot indicator | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | GP - Radio Option 1 (Radio 05) is clicked | Sets the parent group's custom state 'radio\_item\_' to the item value of Option 1, marking it as selected | | GP - Radio Option 2 (Radio 05) is clicked | Sets the parent group's custom state 'radio\_item\_' to the item value of Option 2, marking it as selected | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 06 Source: https://docs.brikl.co/components/elements/radios/radio-06 Card-style radio group with avatar, label, sublabel, and circular radio indicator icon. ![Radio 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-with-sublabel-and-description-and-image-filled.png) ## Overview Radio 06 is a styled radio button group component featuring two selectable card options. Each card displays a circular avatar image, a title, a sublabel, a description text, and a circular radio indicator. When a card is clicked, a workflow sets a custom state on the parent group to track the selected option, and the selected card's border and radio icon update visually to reflect the active selection. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Selected - Option 1 | User clicks on the Radio Option 1 card group | Border color of Option 1 card changes to dark (rgba(27,23,24,1)) and the radio icon switches to a filled dot style with dark background | | Selected - Option 2 | User clicks on the Radio Option 2 card group | Border color of Option 2 card changes to dark (rgba(27,23,24,1)) and the radio icon switches to a filled dot style with dark background | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | GP - Radio Option 1 (Radio 06) is clicked | Sets the custom state 'radio\_item\_' on the parent group (bTIas) to the 'item\_' value of Option 1, marking it as selected | | GP - Radio Option 2 (Radio 06) is clicked | Sets the custom state 'radio\_item\_' on the parent group (bTIas) to the 'item\_' value of Option 2, marking it as selected | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 07 Source: https://docs.brikl.co/components/elements/radios/radio-07 Horizontal row of three bordered radio option cards with icons and labels, rounded corners. ![Radio 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-buttons.png) ## Overview Radio 07 is a custom radio button group component featuring three selectable option cards arranged in a row. Each card contains a circular icon indicator and a text label. When a card is selected, its border highlights and the icon fills with a dot, providing clear visual feedback. Selection state is managed via a custom state on the parent group, making it easy to reference the selected value in workflows or conditional logic elsewhere in the app. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | Selected - Option 1 | User clicks on the Option 1 card | Option 1 card border color changes to dark (rgba(27,23,24,1)) and its icon switches to a filled dot icon with dark background | | Selected - Option 2 | User clicks on the Option 2 card | Option 2 card border color changes to dark (rgba(27,23,24,1)) and its icon switches to a filled dot icon with dark background | | Selected - Option 3 | User clicks on the Option 3 card | Option 3 card border color changes to dark (rgba(27,23,24,1)) and its icon switches to a filled dot icon with dark background | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | GP - Radio Option 1 (Radio 07) is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of Option 1 (number 1), marking it as selected | | GP - Radio Option 2 (Radio 07) is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of Option 2 (number 2), marking it as selected | | GP - Radio Option 3 (Radio 07) is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of Option 3 (number 3), marking it as selected | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 08 Source: https://docs.brikl.co/components/elements/radios/radio-08 Grid layout with four bordered radio option cards, each containing an icon and label text. ![Radio 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-grid-selection.png) ## Overview Radio 08 is a visually styled radio button group component featuring four selectable option cards arranged in a grid. Each card contains a decorative icon and a text label. When a card is selected, its border highlights and the radio indicator icon updates to reflect the active state. Selection is managed via a custom state on the parent group, making it easy to track and use the chosen value in workflows or conditionals. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | Selected Option 1 | User clicks on the Radio Option 1 card | Border color of Option 1 changes to dark (rgba(27,23,24,1)) and its radio icon updates to a filled dot with dark background | | Selected Option 2 | User clicks on the Radio Option 2 card | Border color of Option 2 changes to dark (rgba(27,23,24,1)) and its radio icon updates to a filled dot with dark background | | Selected Option 3 | User clicks on the Radio Option 3 card | Border color of Option 3 changes to dark (rgba(27,23,24,1)) and its radio icon updates to a filled dot with dark background | | Selected Option 4 | User clicks on the Radio Option 4 card | Border color of Option 4 changes to dark (rgba(27,23,24,1)) and its radio icon updates to a filled dot with dark background | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------ | ------------------------------------------------------------------------------------ | | Radio Option 1 card is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of Option 1 | | Radio Option 2 card is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of Option 2 | | Radio Option 3 card is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of Option 3 | | Radio Option 4 card is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of Option 4 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 09 Source: https://docs.brikl.co/components/elements/radios/radio-09 Vertical stack of four card-style radio options with icon, title, price, and badge. ![Radio 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-plans.png) ## Overview Radio 09 is a card-based radio button group component featuring four selectable options. Each option displays a radio icon, a label, a price, and optionally a badge (e.g., 'Popular'). Only one option can be selected at a time. Selection is tracked via a custom state on the parent group, and the selected card visually highlights with a background color change and border update. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Selected State | When the parent group's custom state 'radio\_item\_' equals the option's own 'item\_' custom state value | Card background changes to rgba(245,244,244,1), all four borders turn dark rgba(27,23,24,1), bottom border width becomes 1, and the radio icon switches to a filled dot icon with dark background | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | GP - Radio Option 1 (Radio 09) is clicked | Sets the parent group's custom state 'radio\_item\_' to Option 1's 'item\_' value (1), marking it as selected | | GP - Radio Option 2 (Radio 09) is clicked | Sets the parent group's custom state 'radio\_item\_' to Option 2's 'item\_' value, marking it as selected | | GP - Radio Option 3 (Radio 09) is clicked | Sets the parent group's custom state 'radio\_item\_' to Option 3's 'item\_' value, marking it as selected | | GP - Radio Option 4 (Radio 09) is clicked | Sets the parent group's custom state 'radio\_item\_' to Option 4's 'item\_' value, marking it as selected | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 10 Source: https://docs.brikl.co/components/elements/radios/radio-10 Horizontal segmented radio button group with 6 options, bordered style, white background. ![Radio 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-like.png) ## Overview Radio 10 is a segmented button group component that functions as a radio selector. It presents up to 6 labeled options (0–5) arranged horizontally, where clicking a button sets a custom state on the parent group to track the selected item. The active selection is visually highlighted with a dark border, and disabled buttons appear at reduced opacity. It is ideal for filter bars, tab-like navigation, or single-choice selection UI patterns. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | Disabled | Button's isnt\_clickable condition is true | Button opacity is reduced to 50%, indicating it is non-interactive | | Selected | Parent group's custom state radio\_item\_ equals the button's own item\_ custom state value | Button border color on all sides changes to dark rgba(27,23,24,1), visually indicating the active selection | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------- | ----------------------------------------------------------------------------------------------------- | | Button - 0 is clicked | Sets the parent group's custom state radio\_item\_ to the value of Button 0's item\_ custom state (0) | | Button - 1 is clicked | Sets the parent group's custom state radio\_item\_ to the value of Button 1's item\_ custom state (1) | | Button - 2 is clicked | Sets the parent group's custom state radio\_item\_ to the value of Button 2's item\_ custom state (2) | | Button - 3 is clicked | Sets the parent group's custom state radio\_item\_ to the value of Button 3's item\_ custom state (3) | | Button - 4 is clicked | Sets the parent group's custom state radio\_item\_ to the value of Button 4's item\_ custom state (4) | | Button - 5 is clicked | Sets the parent group's custom state radio\_item\_ to the value of Button 5's item\_ custom state (5) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 11 Source: https://docs.brikl.co/components/elements/radios/radio-11 Horizontal radio toggle with two pill-shaped options: Monthly and Yearly billing, with discount badge. ![Radio 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-monthly-or-yearly.png) ## Overview Radio 11 is a billing period selector component featuring two radio-style toggle options: 'Bill Monthly' and 'Bill Yearly'. It uses a pill/tab switcher pattern where only one option can be selected at a time. The active selection is highlighted with a white background and subtle shadow, while the inactive option remains transparent. The Yearly option also displays a '-20%' discount badge in green. Selection state is managed via a custom state on the parent group. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | Monthly Selected | User clicks the 'GP - Monthly (Radio 11)' group | Monthly option gains white background with a soft box shadow; text color changes to dark; Yearly option returns to transparent background | | Yearly Selected | User clicks the 'GP - Yearly (Radio 11)' group | Yearly option gains white background with a soft box shadow; text color changes to dark; Monthly option returns to transparent background | | Mobile Responsive | Page width is less than mobile breakpoint | The '-20%' discount badge on the Yearly option increases font size from 12 to 14 | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - Monthly (Radio 11) group is clicked | Sets the parent group's 'radio\_item\_' custom state to the 'item\_' custom state value of the Monthly group (value: 1), marking Monthly as selected | | GP - Yearly (Radio 11) group is clicked | Sets the parent group's 'radio\_item\_' custom state to the 'item\_' custom state value of the Yearly group (value: 2), marking Yearly as selected | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 12 Source: https://docs.brikl.co/components/elements/radios/radio-12 Vertical radio button list with star rating filters and review counts, clean minimal style. ![Radio 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-reviews.png) ## Overview Radio 12 is a star-rating filter radio group component designed for review filtering interfaces. It presents six selectable options: 'All Reviews' plus individual star ratings (1–5 stars), each with a radio button indicator, star icons, and review count labels. Only one option can be selected at a time, tracked via a custom state on the parent group. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | Selected | User clicks any radio option group (All Reviews, 1–5 Stars) | The radio button icon changes to a filled dot (phosphor fill dot) with a dark background, indicating the active selection | | Unselected | Default state or another option is clicked | Radio button displays as an outlined circle with a light border and no fill | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------- | ------------------------------------------------------------------------------------------------- | | GP - All Reviews (Radio 12) group is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of the All Reviews group | | GP - 5 Stars (Radio 12) group is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of the 5 Stars group | | GP - 4 Stars (Radio 12) group is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of the 4 Stars group | | GP - 3 Stars (Radio 12) group is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of the 3 Stars group | | GP - 2 Stars (Radio 12) group is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of the 2 Stars group | | GP - 1 Star (Radio 12) group is clicked | Sets the parent group's custom state 'radio\_item\_' to the item\_ value of the 1 Star group | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 13 Source: https://docs.brikl.co/components/elements/radios/radio-13 Vertical radio card group with icon, label, badge, pricing, and radio button indicator. ![Radio 13](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-plan-with-description.png) ## Overview Radio 13 is a styled radio button card component that allows users to select between multiple plan options. Each option displays an icon, a title, a badge, pricing details, and a circular radio indicator. The selected state is managed via a custom state on the parent group, visually updating borders, backgrounds, and the radio icon fill when an option is active. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 13** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Selected Option | Custom state 'radio\_item\_' on parent group matches the clicked option's item | Border color of the option card changes to dark, box shadow spread increases, header background changes to stone, and radio icon switches to filled dot with dark background | | Unselected Option | Default state when option is not selected | Option card shows default border, radio icon shows as empty circle outline with light border | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------- | ------------------------------------------------------------------------------------- | | GP - Option 1 (Radio 13) is clicked | Sets custom state 'radio\_item\_' on the parent group to the current item of Option 1 | | GP - Option 2 (Radio 13) is clicked | Sets custom state 'radio\_item\_' on the parent group to the current item of Option 2 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Radio 14 Source: https://docs.brikl.co/components/elements/radios/radio-14 Radio button group with card logo, card info, expiry text, and action buttons in a row layout. ![Radio 14](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Radios/radio-payment.png) ## Overview Radio 14 is a payment method selection component styled as a radio button group. Each option displays a card logo (e.g., Visa), card details (last four digits, expiry date), a 'Set as default' label, and an 'Edit' button. Users can select a payment option by clicking, which updates the active state visually by highlighting the selected card and filling the radio button indicator. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Radio 14** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Selected / Active Option | User clicks on a radio option group element | The selected option's background changes to rgba(245,245,244,1), its border becomes dark rgba(27,23,24,1), and the radio icon switches to a filled dot with a dark background rgba(27,23,24,1) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | GP - Option 1 (Radio 14) is clicked | Sets the custom state 'radio\_item\_' on the parent group (bTJuV) to the current item of Option 1, marking it as the selected radio option | | GP - Option 2 (Radio 14) is clicked | Sets the custom state 'radio\_item\_' on the parent group (bTJuV) to the current item of Option 2, marking it as the selected radio option | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Select 01 Source: https://docs.brikl.co/components/elements/selects/select-01 Vertical column layout with a label text and a native dropdown select input below it. ![Select 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Selects/select-simple-native.png) ## Overview Select 01 is a simple native dropdown (select) component for web applications. It presents a labeled dropdown input that allows users to choose one option from a predefined list. It includes built-in visual states for focus, validation errors, and disabled interactions, making it suitable for forms requiring straightforward single-value selection. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Select 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | Focused | When the dropdown element is focused by the user | Adds a soft box shadow (rgba(216,211,212,0.5)) with spread of 3 around the dropdown border | | Invalid | When the dropdown value is not valid (fails validation) | Border turns red (rgba(251,44,54,1)) and a red-tinted box shadow (rgba(251,44,54,0.2)) appears around the element | | Disabled | When the dropdown is not clickable | Opacity is reduced to 50%, visually indicating the element is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Select 02 Source: https://docs.brikl.co/components/elements/selects/select-02 Vertical column layout with label, native dropdown select, and helper text below. ![Select 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Selects/select-with-helper-text-native.png) ## Overview Select 02 is a native dropdown (select) component with a label and helper text. It provides users with a styled select input offering predefined options, visual focus and validation states, and a subtle helper message beneath the field to guide user input. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Select 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------------------ | ----------------------------------------------------------------------------------- | | Focused | Element receives focus | Adds a soft box shadow (rgba(216,211,212,0.5)) with spread of 3 around the dropdown | | Invalid | Element fails validation (isnt\_valid) | Border color changes to red (rgba(251,44,54,1)) and a red-tinted box shadow appears | | Disabled | Element is not clickable (isnt\_clickable) | Opacity reduces to 50%, visually indicating a disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Select 03 Source: https://docs.brikl.co/components/elements/selects/select-03 A labeled native dropdown select with gray background, rounded corners, and focus shadow state. ![Select 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Selects/select-gray-background-native.png) ## Overview Select 03 is a native dropdown (select) component featuring a gray background style. It includes a descriptive label above the dropdown and presents four predefined options. The component is designed for web forms where a compact, styled native select input is needed, with smooth focus transitions including a border highlight and box shadow effect. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Select 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | Focused | When the dropdown element receives focus | Border changes to solid style with rgba(216,211,212,1) color and a spread box shadow of rgba(216,211,212,0.5) appears around the element | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Select 04 Source: https://docs.brikl.co/components/elements/selects/select-04 Disabled native dropdown select with label, bordered white background, rounded corners. ![Select 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Selects/select-disabled-native.png) ## Overview Select 04 is a disabled native dropdown (select) component for web applications. It displays a labeled dropdown input in a visually inactive state, preventing user interaction. It is useful for forms where certain fields should be read-only or conditionally disabled based on app logic. The component includes conditional states for focus, validation errors, and non-clickable scenarios. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Select 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------- | ------------------------------------------------------------------- | | Focused | Element receives focus | Adds a soft box shadow (rgba(216,211,212,0.5)) around the dropdown | | Invalid | Element fails validation | Border changes to red (rgba(251,44,54,1)) and adds a red box shadow | | Not Clickable | Element is set as not clickable | Opacity is reduced to 50%, visually indicating disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Select 05 Source: https://docs.brikl.co/components/elements/selects/select-05 A labeled dropdown select input with a leading icon, styled with border, shadow, and focus states. ![Select 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Selects/select-with-icon-native.png) ## Overview Select 05 is a native dropdown (select) component featuring a start icon on the left side of the input field. It includes a label above the field, a list-checks phosphor icon, and a native Bubble Dropdown element. The component supports focus, validation error, and disabled visual states, making it suitable for forms requiring accessible, icon-enhanced select inputs. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Select 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | Focused | Dropdown element receives focus | Adds a soft blue-tinted box shadow (spread 3) around the select group container | | Invalid | Dropdown element fails validation (isnt\_valid) | Border color changes to red (rgba(251,44,54,1)) and a red-tinted box shadow appears around the container | | Disabled | Dropdown element is not clickable (isnt\_clickable) | Container opacity reduces to 50%, indicating a disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Select 06 Source: https://docs.brikl.co/components/elements/selects/select-06 A dropdown select input with an overlapping label positioned above the field boundary. ![Select 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Selects/select-with-overlapping-label-native.png) ## Overview Select 06 is a native dropdown (select) component featuring an overlapping label style, where a text label visually overlaps the top border of the input field. It includes predefined options, placeholder styling, focus and validation states, and a disabled (non-clickable) state, making it suitable for form-based UIs requiring clear field labeling. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Select 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------------------- | ------------------------------------------------------------------------------------------ | | Focused | Dropdown is focused by the user | Adds a soft box shadow (rgba(216,211,212,0.5)) with spread of 3 around the dropdown border | | Invalid | Dropdown fails validation (isnt\_valid) | Border changes to red (rgba(251,44,54,1)) and a red-tinted box shadow appears | | Disabled | Dropdown is not clickable (isnt\_clickable) | Opacity of the dropdown is reduced to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Select 07 Source: https://docs.brikl.co/components/elements/selects/select-07 Bordered card group with inset label text above a native dropdown select input. ![Select 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Selects/select-with-inset-label-native.png) ## Overview Select 07 is a styled native dropdown (select) component featuring an inset label above the input field. It provides a clean, card-like container with rounded borders and a subtle box shadow. The component supports focus, validation error, and disabled states, making it suitable for forms that require accessible and visually consistent select inputs on web applications. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Select 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------- | | Focused | The dropdown element receives focus | A soft colored box shadow (rgba(216,211,212,0.5)) spreads around the container to indicate active focus | | Invalid | The dropdown element fails validation | Border color changes to red (rgba(251,44,54,1)) and a red-tinted box shadow appears around the container | | Disabled | The dropdown element is not clickable | The entire group opacity is reduced to 50%, visually indicating a disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Stepper 01 Source: https://docs.brikl.co/components/elements/steppers/stepper-01 Horizontal stepper with 4 numbered buttons and connecting lines, minimal dark/light style. ![Stepper 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-with-number-only.png) ## Overview Stepper 01 is a multi-step progress indicator component featuring 4 numbered step buttons connected by divider lines. It tracks the current active step using a custom state, visually highlighting completed and active steps by changing button and connector colors. It is ideal for multi-step forms, onboarding flows, or wizard-style navigation. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | Step Active / Completed | When the custom state 'step\_' on the parent group is greater than or equal to the step number | The button background changes to dark (rgba(27,23,24,1)) and font color changes to white, indicating the step is active or completed | | Connector Line Completed | When the custom state 'step\_' on the parent group is greater than the step number | The connecting shape/line between steps changes background to dark (rgba(27,23,24,1)), indicating the step has been passed | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------- | --------------------------------------------------------------------- | | Button 1 - Stepper 01 is clicked | Sets the custom state 'step\_' on the parent group (bTPee) to value 1 | | Button 2 - Stepper 01 is clicked | Sets the custom state 'step\_' on the parent group (bTPee) to value 2 | | Button 3 - Stepper 01 is clicked | Sets the custom state 'step\_' on the parent group (bTPee) to value 3 | | Button 4 - Stepper 01 is clicked | Sets the custom state 'step\_' on the parent group (bTPee) to value 4 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 02 Source: https://docs.brikl.co/components/elements/steppers/stepper-02 Horizontal stepper with 4 circular step indicators connected by separator lines, showing progress states. ![Stepper 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-with-numbers-and-checkmarks.png) ## Overview Stepper 02 is a multi-step progress indicator component that visually tracks a user's position across 4 sequential steps. Each step displays a numbered circle button that turns dark when active or completed, and shows a checkmark icon when the step has been passed. Separator lines between steps also change color to reflect progress. It is ideal for multi-step forms, onboarding flows, or checkout processes. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | Active Step | When custom state 'step\_' equals the step number | The step circle turns dark (rgba(27,23,24,1)) and the number text turns white | | Completed Step | When custom state 'step\_' is greater than the step number | The number text is hidden and a white checkmark icon becomes visible inside the dark circle | | Inactive Step | When custom state 'step\_' is less than the step number | The step circle remains light grey (rgba(245,244,244,1)) with a grey number and no checkmark | | Completed Separator | When custom state 'step\_' is greater than the step number | The separator line between steps turns dark (rgba(27,23,24,1)) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------- | --------------------------------------------------------- | | Button 01 - Stepper 02 is clicked | Sets custom state 'step\_' on the parent group to value 1 | | Button 02 - Stepper 02 is clicked | Sets custom state 'step\_' on the parent group to value 2 | | Button 03 - Stepper 02 is clicked | Sets custom state 'step\_' on the parent group to value 3 | | Button 04 - Stepper 02 is clicked | Sets custom state 'step\_' on the parent group to value 4 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 03 Source: https://docs.brikl.co/components/elements/steppers/stepper-03 Horizontal stepper with four circular step buttons connected by lines, minimal dark style. ![Stepper 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-with-tinny-buttons-and-checkmarks.png) ## Overview Stepper 03 is a multi-step progress indicator component featuring four numbered circular buttons connected by divider lines. It uses a custom state to track the current active step, visually distinguishing completed steps (filled dark), the active step (outlined), and upcoming steps (muted). It is ideal for multi-step forms, onboarding flows, or checkout processes. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | Active Step | When the custom state 'step\_' on the parent group equals the step number | The button displays a white background with a dark border and white font, indicating the current active step | | Completed Step | When the custom state 'step\_' on the parent group is greater than the step number | The button fills with dark background and shows a white check icon; the connector line also turns dark | | Default / Inactive Step | When the custom state 'step\_' is less than the step number | The button and connector line remain in a muted light gray style | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------- | --------------------------------------------------------------------- | | Button 1 - Stepper 03 is clicked | Sets the custom state 'step\_' on the parent group (bTPkL) to value 1 | | Button 2 - Stepper 03 is clicked | Sets the custom state 'step\_' on the parent group (bTPkL) to value 2 | | Button 3 - Stepper 03 is clicked | Sets the custom state 'step\_' on the parent group (bTPkL) to value 3 | | Button 4 - Stepper 03 is clicked | Sets the custom state 'step\_' on the parent group (bTPkL) to value 4 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 04 Source: https://docs.brikl.co/components/elements/steppers/stepper-04 Horizontal stepper with numbered circles, connecting lines, and prev/next navigation buttons. ![Stepper 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-controlled-with-checkmarks.png) ## Overview Stepper 04 is a multi-step progress indicator component that visually guides users through a sequential process. It displays numbered step buttons connected by separator lines, dynamically highlighting the active step, marking completed steps with a check icon, and allowing navigation between steps via Previous and Next buttons. The current step is tracked using a custom state on the parent group. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Step Active | Current step number equals the step index (e.g., step\_ = 1) | Step button text color changes to white, indicating the currently active step | | Step Completed | Current step number is greater than the step index (e.g., step\_ > 1) | Step button background turns dark, number text hides, and a check icon becomes visible | | Step Reached | Current step number is greater than or equal to the step index | Step button background color changes to dark (rgba(27,23,24,1)) indicating reached state | | Connector Line Completed | Current step number is greater than the step index | The connecting shape/line between steps turns dark to indicate progression | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------ | ------------------------------------------------------------------------------------------------------ | | Button - Prev Step (Stepper 04) is clicked | Decrements the custom state 'step\_' on the parent group by 1, moving the stepper to the previous step | | Button - Next Step (Stepper 04) is clicked | Increments the custom state 'step\_' on the parent group by 1, advancing the stepper to the next step | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 05 Source: https://docs.brikl.co/components/elements/steppers/stepper-05 Horizontal stepper with 4 progress indicator bars and Prev/Next navigation buttons. ![Stepper 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-progress-bar.png) ## Overview Stepper 05 is a multi-step progress indicator component featuring four visual step bars that fill progressively as the user advances through steps. It includes Prev Step and Next Step buttons to navigate between steps, with the Prev button disabled on step 1 and the Next button disabled on step 4. The active step state is tracked via a custom state on the parent group element. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | --------------------------------------------------- | ---------------------------------------------------------------- | | Step 1 Active | Custom state 'step\_' equals 1 on parent group | Step 01 bar fills with dark color; Prev Step button is disabled | | Step 2 Active | Custom state 'step\_' is greater than or equal to 2 | Step 02 bar fills with dark color in addition to Step 01 | | Step 3 Active | Custom state 'step\_' is greater than or equal to 3 | Step 03 bar fills with dark color in addition to Steps 01 and 02 | | Step 4 Active | Custom state 'step\_' is greater than or equal to 4 | All four bars filled; Next Step button is disabled | | Button Hovered | Mouse hover on Prev or Next button (when clickable) | Button background changes to light grey rgba(245,244,244,1) | | Button Disabled | Button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------ | ------------------------------------------------------------- | | Button - Prev Step (Stepper 05) is clicked | Decrements the custom state 'step\_' on the parent group by 1 | | Button - Next Step (Stepper 05) is clicked | Increments the custom state 'step\_' on the parent group by 1 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 06 Source: https://docs.brikl.co/components/elements/steppers/stepper-06 Horizontal stepper with numbered circles, check icons, connecting lines, and step labels. ![Stepper 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-with-inline-title.png) ## Overview Stepper 06 is a multi-step progress indicator component featuring three steps. Each step displays a numbered circle that transitions to a filled dark circle with a checkmark when completed, connected by horizontal separator lines. Step labels appear next to each step indicator on desktop and hide on mobile. Clicking any step button sets the active step via a custom state, enabling visual progression tracking across forms or onboarding flows. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | Step Active | Custom state 'step\_' on the parent group equals the step number | The step number text color changes to white on a dark filled background circle | | Step Completed | Custom state 'step\_' on the parent group is greater than the step number | The number text hides, a white checkmark icon appears, the circle background turns dark, and the connecting line turns dark | | Step Inactive | Custom state 'step\_' is less than the step number | Circle shows light background with gray number text and no checkmark | | Mobile Label Hidden | Current page width is less than or equal to the built-in mobile breakpoint | Step label text next to each step circle becomes hidden | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------ | --------------------------------------------------------- | | BT - Step 01 - Stepper 06 is clicked | Sets custom state 'step\_' on the parent group to value 1 | | BT - Step 02 - Stepper 06 is clicked | Sets custom state 'step\_' on the parent group to value 2 | | BT - Step 03 - Stepper 06 is clicked | Sets custom state 'step\_' on the parent group to value 3 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 07 Source: https://docs.brikl.co/components/elements/steppers/stepper-07 Horizontal stepper with numbered circles, connector lines, step titles, and descriptions. ![Stepper 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-with-inline-title-and-description.png) ## Overview Stepper 07 is a multi-step progress indicator component featuring three clickable steps arranged horizontally. Each step displays a numbered circle (or checkmark when completed), a connector line between steps, and optional title/description labels. It uses a custom state to track the current active step, visually updating circle colors and showing checkmarks for completed steps. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------- | | Step Active | custom.step\_ equals the step number | Step circle background turns dark and number text color changes to white | | Step Completed | custom.step\_ is greater than the step number | Number text hides and a checkmark icon becomes visible; connector line turns dark | | Step Inactive | custom.step\_ is less than the step number | Step circle remains light gray with muted number text; connector line stays light | | Mobile Hidden Labels | Current page width is less than or equal to mobile breakpoint | Step title and description text groups are hidden on mobile | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------ | -------------------------------------------------------------- | | BT - Step 01 - Stepper 07 is clicked | Sets custom state custom.step\_ on the parent group to value 1 | | BT - Step 02 - Stepper 07 is clicked | Sets custom state custom.step\_ on the parent group to value 2 | | BT - Step 03 - Stepper 07 is clicked | Sets custom state custom.step\_ on the parent group to value 3 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 08 Source: https://docs.brikl.co/components/elements/steppers/stepper-08 Horizontal stepper with 4 circular step indicators, connecting lines, and check icons for completed steps. ![Stepper 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-vertical-with-numbers-and-checkmarks.png) ## Overview Stepper 08 is a multi-step progress indicator component with 4 clickable steps. Each step displays a numbered circle button that visually transitions between inactive, active, and completed states. When a step is active, its circle turns dark and the number is highlighted in white. When a step is completed (passed), the number is replaced by a checkmark icon. Connecting lines between steps also turn dark to indicate progress. Users can click any step button to jump directly to that step, making it suitable for multi-step forms, onboarding flows, or wizards. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------------------------------- | --------------------------------------------------------------------------------- | | Inactive step | Step number is less than the current custom state value | Step circle has a light background with a gray step number visible | | Active step | Custom state equals the step number (e.g., step\_ = 1) | Step circle background turns dark (black), step number text turns white | | Completed step | Custom state is greater than the step number | Step circle turns dark, number text is hidden, and a white checkmark icon appears | | Completed connector line | Custom state is greater than the step number | The connecting shape/line between steps turns dark (black) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------- | ------------------------------------------------------------- | | Button 01 - Stepper 08 is clicked | Sets the custom state 'step\_' on the parent group to value 1 | | Button 02 - Stepper 08 is clicked | Sets the custom state 'step\_' on the parent group to value 2 | | Button 03 - Stepper 08 is clicked | Sets the custom state 'step\_' on the parent group to value 3 | | Button 04 - Stepper 08 is clicked | Sets the custom state 'step\_' on the parent group to value 4 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 09 Source: https://docs.brikl.co/components/elements/steppers/stepper-09 Horizontal stepper with numbered circles, connector lines, and prev/next navigation buttons. ![Stepper 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-controlled-vertical-with-checkmarks.png) ## Overview Stepper 09 is a multi-step progress indicator component that visually guides users through a sequential workflow. It displays numbered step buttons connected by lines, highlights the active step, marks completed steps with a checkmark icon, and provides Previous and Next navigation buttons to move between steps. The active step is tracked via a custom state on the parent group. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | Step Active | Current step number equals the step index | Step button circle turns dark (rgba(27,23,24,1)) and the number text turns white | | Step Completed | Current step number is greater than the step index | Step button circle turns dark, number text is hidden, and a white checkmark icon becomes visible | | Connector Line Completed | Current step number is greater than the step index | The connecting shape/line between steps turns dark (rgba(27,23,24,1)) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------ | ------------------------------------------------------------------------------------------ | | Button - Prev Step (Stepper 09) is clicked | Decrements the custom state 'step\_' on the parent group by 1, moving to the previous step | | Button - Next Step (Stepper 09) is clicked | Increments the custom state 'step\_' on the parent group by 1, moving to the next step | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 10 Source: https://docs.brikl.co/components/elements/steppers/stepper-10 Horizontal stepper with numbered circles, check icons, connecting lines, and step labels. ![Stepper 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-vertical-with-inline-title.png) ## Overview Stepper 10 is a multi-step progress indicator component displaying three sequential steps. Each step features a circular badge showing a number or a checkmark icon (when completed), a step label, and a connecting line between steps. It uses a custom state to track the current active step, visually differentiating between completed, active, and inactive steps through color and icon changes. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------- | | Step Active | Current step equals the step number | Step circle background turns dark and number text color changes to white | | Step Completed | Current step is greater than the step number | Number text is hidden and a white checkmark icon appears; circle and connector line turn dark | | Step Inactive | Current step is less than the step number | Step circle remains light grey with muted number text; no checkmark shown | | Mobile Hidden Label | Page width is less than or equal to mobile breakpoint | Step label text is hidden to save horizontal space on mobile screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------ | ------------------------------------------------------------- | | BT - Step 01 - Stepper 10 is clicked | Sets the custom state 'step\_' on the parent group to value 1 | | BT - Step 02 - Stepper 10 is clicked | Sets the custom state 'step\_' on the parent group to value 2 | | BT - Step 03 - Stepper 10 is clicked | Sets the custom state 'step\_' on the parent group to value 3 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Stepper 11 Source: https://docs.brikl.co/components/elements/steppers/stepper-11 Horizontal stepper with numbered/icon circles, connecting lines, and step labels for multi-step flows. ![Stepper 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-vertical-with-inline-title-and-description.png) ## Overview Stepper 11 is a multi-step progress indicator component designed for guiding users through sequential steps. It displays up to three steps, each with a numbered circle (or a checkmark icon when completed), a connecting line between steps, and optional title and description labels. The active and completed states are visually distinguished through background color changes, making it easy for users to track their progress in forms, onboarding flows, or wizards. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Stepper 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | Step Active | Custom state 'step\_' on the parent group equals the step number | The step circle background changes to dark (rgba(27,23,24,1)) and the step number text turns white | | Step Completed | Custom state 'step\_' on the parent group is greater than the step number | The step circle background turns dark, the number text is hidden, and a white checkmark icon becomes visible | | Connecting Line Active | Custom state 'step\_' is greater than the associated step number | The shape connector line changes from light grey (rgba(245,244,244,1)) to dark (rgba(27,23,24,1)) | | Labels Hidden on Mobile | Current page width is less than or equal to the built-in mobile breakpoint | The title and description label group for each step is hidden to save space on small screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------ | --------------------------------------------------------------------- | | BT - Step 01 - Stepper 11 is clicked | Sets the custom state 'step\_' on the parent group (bTQCw) to value 1 | | BT - Step 02 - Stepper 11 is clicked | Sets the custom state 'step\_' on the parent group (bTQCw) to value 2 | | BT - Step 03 - Stepper 11 is clicked | Sets the custom state 'step\_' on the parent group (bTQCw) to value 3 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Switch 01 Source: https://docs.brikl.co/components/elements/switchs/switch-01 Pill-shaped toggle switch with a circular white knob that slides left or right. ![Switch 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-simple.png) ## Overview Switch 01 is a toggle switch UI component that allows users to turn a setting on or off. It uses a custom boolean state to track its active/inactive status, visually shifting the knob position and changing the background color to reflect the current state. It is designed for both web and mobile interfaces and requires no plugins or custom code. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | Off (default) | Initial load or when custom state 'active\_' is false | Background is gray (rgba(216,211,212,1)), knob is aligned to the left | | On (active) | User clicks the switch when 'active\_' is false, setting it to true | Background changes to dark (rgba(27,23,24,1)), knob shifts to the right (flex-end alignment) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------- | ----------------------------------------------------------------- | | Switch group is clicked when 'active\_' custom state is false | Sets the custom state 'active\_' to true, turning the switch on | | Switch group is clicked when 'active\_' custom state is true | Sets the custom state 'active\_' to false, turning the switch off | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Switch 02 Source: https://docs.brikl.co/components/elements/switchs/switch-02 A toggle switch group with a circular white knob that slides between off and on states. ![Switch 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-squared.png) ## Overview Switch 02 is a free, interactive toggle switch component for Bubble.io. It displays a rounded pill-shaped container with a sliding white circular knob that visually moves from left (off) to right (on) when clicked. The component uses a custom boolean state to track its active status and toggles between on and off via conditional workflows on click. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Off | Default state or when active\_ custom state is false | Background is light gray (rgba(216,211,212,1)), knob is aligned to the left (flex-start) | | On | When active\_ custom state is true | Background changes to dark (rgba(27,23,24,1)), knob slides to the right (flex-end) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------------- | --------------------------------------------------------------- | | Switch group clicked (when active\_ is false) | Sets the active\_ custom state to true, turning the switch on | | Switch group clicked (when active\_ is true) | Sets the active\_ custom state to false, turning the switch off | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Switch 03 Source: https://docs.brikl.co/components/elements/switchs/switch-03 A pill-shaped toggle switch with a circular white thumb that slides between off and on states. ![Switch 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-big-circle.png) ## Overview Switch 03 is a toggleable on/off switch component built with a Group container and a Shape element acting as the thumb. It manages its state using a custom boolean state called 'active\_', visually repositioning the thumb to the right when active and left when inactive. It is suitable for settings, preferences, or any binary input interaction. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | Off (Default) | Initial load or when custom state 'active\_' is false | Switch background is light gray (rgba(216,211,212,1)) and the thumb is aligned to the left (flex-start) | | On (Active) | User clicks the switch when 'active\_' is false | Switch background changes to dark (rgba(27,23,24,1)) and the thumb slides to the right (flex-end) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------ | ----------------------------------------------------------------- | | Switch Group is clicked when 'active\_' is false | Sets the custom state 'active\_' to true, turning the switch on | | Switch Group is clicked when 'active\_' is true | Sets the custom state 'active\_' to false, turning the switch off | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Switch 04 Source: https://docs.brikl.co/components/elements/switchs/switch-04 A minimal toggle switch with a circular thumb that slides between off and on states. ![Switch 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-outlined.png) ## Overview Switch 04 is a toggle switch UI component that allows users to turn a setting on or off. It consists of a rounded container with a circular thumb element that visually shifts position based on the active state. The component manages its own boolean custom state ('active\_') and includes conditional workflows to toggle between true and false when clicked. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Off (Default) | Initial state or when active\_ custom state is false | Border color is light gray, thumb is aligned to the left with a gray background | | On (Active) | User clicks the switch when active\_ is false | Border color changes to dark (rgba(27,23,24,1)), thumb background turns dark and aligns to the right | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------ | ---------------------------------------------------------------------------------- | | Switch group is clicked (when active\_ is false) | Sets the custom state 'active\_' on the switch element to true (turns switch on) | | Switch group is clicked (when active\_ is true) | Sets the custom state 'active\_' on the switch element to false (turns switch off) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Switch 05 Source: https://docs.brikl.co/components/elements/switchs/switch-05 Horizontal toggle switch with label text, showing Off/On states with dark and light styling. ![Switch 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-with-right-text.png) ## Overview Switch 05 is a toggle switch component that allows users to activate or deactivate a boolean state. It consists of a pill-shaped toggle track with a circular thumb that slides between left (Off) and right (On) positions, accompanied by a label that updates accordingly. The active state is managed via a custom state on the parent group. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Off (default) | Custom state 'active\_' is false on the parent group | Switch background is gray (rgba(216,211,212,1)), thumb aligned to the left, label displays 'Off' | | On (active) | Custom state 'active\_' is true on the parent group | Switch background changes to dark (rgba(27,23,24,1)), thumb aligns to the right, label displays 'On' | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------- | --------------------------------------------------------------------------------- | | GP - Switch 05 is clicked (when active\_ is false) | Sets custom state 'active\_' to true on the parent group, turning the switch On | | GP - Switch 05 is clicked (when active\_ is true) | Sets custom state 'active\_' to false on the parent group, turning the switch Off | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Switch 06 Source: https://docs.brikl.co/components/elements/switchs/switch-06 A toggle switch with On/Off labels, rounded pill shape, and animated white thumb indicator. ![Switch 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-with-right-and-left-text.png) ## Overview Switch 06 is a toggle switch component that allows users to switch between an active (On) and inactive (Off) state. It features a pill-shaped container with a sliding white circle thumb, label text for both states, and visual feedback through background color changes. The component uses a custom state to track its active status and includes workflows to toggle the state on click. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Active (On) | Custom state 'active\_' is true on the parent group | Switch container background changes to dark (rgba(27,23,24,1)), thumb aligns to the right (flex-end), and the 'On' label becomes fully opaque (opacity 100) | | Inactive (Off) | Custom state 'active\_' is false on the parent group | Switch container background remains light grey (rgba(216,211,212,1)), thumb aligns to the left (flex-start), and the 'Off' label becomes fully opaque (opacity 100) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------- | ------------------------------------------------------------------------------------ | | GP - Switch 06 is clicked (when active\_ is false) | Sets custom state 'active\_' to true on the Switch 06 group, turning the switch On | | GP - Switch 06 is clicked (when active\_ is true) | Sets custom state 'active\_' to false on the Switch 06 group, turning the switch Off | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Switch 07 Source: https://docs.brikl.co/components/elements/switchs/switch-07 A toggle switch with moon/sun icon, pill-shaped track, and animated circular knob. ![Switch 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-with-icon-right.png) ## Overview Switch 07 is a dark/light mode-style toggle switch component that allows users to switch between two states (off/on). It features a pill-shaped background that changes color, a sliding circular knob that moves left or right, and a moon/sun icon that changes based on the active state. The component uses a custom state to track whether it is active or inactive, and workflows handle the toggling logic on click. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | Off (Default) | Initial load or when custom state 'active\_' is false | Track background is light gray, knob is aligned to the left, icon shows a moon-stars symbol | | On (Active) | User clicks the switch when 'active\_' is false | Track background changes to dark (rgba(27,23,24,1)), knob aligns to the right (flex-end), icon changes to a sun symbol | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------- | ---------------------------------------------------------------------------------- | | GP - Switch 07 is clicked (when active\_ is false) | Sets custom state 'active\_' on the group element to true, turning the switch on | | GP - Switch 07 is clicked (when active\_ is true) | Sets custom state 'active\_' on the group element to false, turning the switch off | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Switch 08 Source: https://docs.brikl.co/components/elements/switchs/switch-08 Pill-shaped toggle switch with moon and sun icons indicating off/on states. ![Switch 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-with-icon-right-and-left.png) ## Overview Switch 08 is an interactive toggle component that allows users to switch between two states (active/inactive). It features a sliding circle indicator inside a rounded pill container, accompanied by moon and sun icons that visually represent the off and on states respectively. The active state changes the background color and repositions the toggle knob. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | Off (Inactive) | Custom state 'active\_' is false | Background is light gray, toggle knob aligned to the left, moon icon is fully visible, sun icon is dimmed | | On (Active) | Custom state 'active\_' is true | Background changes to dark (rgba(27,23,24,1)), toggle knob shifts to the right, sun icon becomes fully visible, moon icon is dimmed | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------- | ---------------------------------------------------------------------------------- | | GP - Switch 08 is clicked (when active\_ is false) | Sets custom state 'active\_' to true on the group element, turning the switch on | | GP - Switch 08 is clicked (when active\_ is true) | Sets custom state 'active\_' to false on the group element, turning the switch off | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Switch 09 Source: https://docs.brikl.co/components/elements/switchs/switch-09 Labeled switch with toggle, sublabel, description text, rounded pill shape, column layout. ![Switch 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-with-sublabel-and-description-02.png) ## Overview Switch 09 is a toggle switch component featuring a label, sublabel, and description text. It allows users to toggle between an active and inactive state. The switch visually changes its background color and thumb alignment to indicate the current state, and it uses a custom state to track whether it is on or off. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Active (ON) | User clicks the switch when it is currently OFF (custom.active\_ is false) | Switch background changes to dark color rgba(27,23,24,1), thumb aligns to the right (flex-end), and the outer group border color updates to rgba(27,23,24,1) | | Inactive (OFF) | User clicks the switch when it is currently ON (custom.active\_ is true) | Switch background reverts to grey rgba(216,211,212,1), thumb aligns to the left (flex-start), and the outer group border color reverts to default | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------------------------------------------- | ----------------------------------------------------------------------------------- | | GP - Switch 09 is clicked (when custom.active\_ is false) | Sets custom state custom.active\_ to true on element bTKBV, turning the switch ON | | GP - Switch 09 is clicked (when custom.active\_ is true) | Sets custom state custom.active\_ to false on element bTKBV, turning the switch OFF | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Switch 10 Source: https://docs.brikl.co/components/elements/switchs/switch-10 Card-style switch with icon, label, sublabel, description text, and toggle control on the right. ![Switch 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Switchs/switch-with-sublabel-and-description-and-image-02.png) ## Overview Switch 10 is a styled toggle component displayed as a card with a border and shadow. It includes an icon (image), a title, a sublabel, and a description text, alongside a visual toggle switch on the right. It is designed for settings or preference screens where users can enable or disable an option with clear labeling and branding context. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Switch 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Active (ON) | User clicks the group when custom state 'active\_' is false | Sets custom state 'active\_' to true; toggle background changes to dark (rgba(27,23,24,1)) and the toggle knob shifts to the right (flex-end alignment); card border color also changes to dark | | Inactive (OFF) | User clicks the group when custom state 'active\_' is true | Sets custom state 'active\_' to false; toggle background reverts to light gray (rgba(216,211,212,1)) and the toggle knob returns to the left (flex-start alignment) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------- | ------------------------------------------------------------------------- | | GP - Switch 10 is clicked (when active\_ is false) | Sets custom state 'active\_' on element bTJyK to true (turns switch ON) | | GP - Switch 10 is clicked (when active\_ is true) | Sets custom state 'active\_' on element bTJyK to false (turns switch OFF) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Table 01 Source: https://docs.brikl.co/components/elements/tables/table-01 A multi-column data table with header row and data rows displaying name, email, status, location, and balance. ![Table 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tables/table-basic.png) ## Overview Table 01 is a structured data table component designed for web applications. It features a sticky-capable header row with column labels (Name, Status, Balance, Email, Location) and dynamic data rows that pull content from a data source. The table supports hover states on rows and is built using Bubble's native Table element with defined column widths and alignment settings. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Table 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | -------------------------------------------------------------- | | Row Hover | Mouse hovers over a TableCrossAxis (data row) | Row background changes to a light gray (rgba(245,244,244,0.5)) | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Header text font size reduces to 14px for compact display | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Table 02 Source: https://docs.brikl.co/components/elements/tables/table-02 A styled data table with header row and data rows showing Name, Email, Status, Location, and Balance columns. ![Table 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tables/table-sticky-header.png) ## Overview Table 02 is a free, web-based data table component built using Bubble's native Table element. It displays structured data across five columns: Name, Email, Status, Location, and Balance. The header row uses muted gray labels, while data rows dynamically render values split from a pipe-delimited data source. Rows include a hover state with a subtle background color change, making it suitable for dashboards, admin panels, or any data listing interface. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Table 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------- | ------------------------------------------ | ------------------------------------------------------------------------------- | | Row Hovered | User hovers over a TableCrossAxis data row | Row background changes to a light semi-transparent gray (rgba(245,244,244,0.5)) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Table 03 Source: https://docs.brikl.co/components/elements/tables/table-03 Multi-column data table with sticky header row showing Name, Status, Balance, Email, and Location columns. ![Table 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tables/table-with-vertical-lines.png) ## Overview Table 03 is a structured data table component built using Bubble's native Table element. It displays tabular data across five columns: Name, Status, Balance, Email, and Location. The header row contains styled label cells with muted gray text, while data rows dynamically populate from a pipe-delimited data source using TableCrossAxis ancestor references. The Balance column is right-aligned, and the Name column has a wider minimum width to accommodate longer values. It is designed for web use and suited for displaying lists of records such as users, customers, or contacts. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Table 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Table 04 Source: https://docs.brikl.co/components/elements/tables/table-04 A multi-column data table with checkboxes, name, status, balance, email, and location columns. ![Table 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tables/table-with-rows-selection.png) ## Overview Table 04 is a structured data table component featuring selectable rows via checkbox icons, displaying columns for Name, Status, Balance, Email, and Location. It supports row hover states, multi-row selection tracking via custom states, and sticky header functionality. Designed for web applications requiring tabular data display with interactive row selection. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Table 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | Row Hovered | User hovers over a table row (TableCrossAxis) | Row background changes to a light gray (rgba(245,244,244,0.5)) | | Row Selected | The row's data item is contained in the Table's custom state 'items\_' | Row background changes to light gray and the checkbox icon changes from an empty square to a filled check icon with black background | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Icon - Checkbox (Table 04) is clicked (when row IS already selected) | Removes the current row's data item from the Table's custom state 'items\_' list (deselects the row) | | Icon - Checkbox (Table 04) is clicked (when row is NOT selected) | Adds the current row's data item to the Table's custom state 'items\_' list (selects the row) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Table 05 Source: https://docs.brikl.co/components/elements/tables/table-05 Data table with checkbox selection, avatar, name, email, status, balance, and location columns. ![Table 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tables/table-card.png) ## Overview Table 05 is an interactive data table component featuring multi-row checkbox selection, user profile display, and structured data columns including Name, Email, Status, Balance, and Location. It supports row hover highlighting and tracks selected rows via a custom state, making it ideal for admin dashboards, user management screens, or any list-based UI requiring bulk selection functionality. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Table 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | Row Hover | User hovers over a table row (TableCrossAxis) | Row background changes to a light gray (rgba(245,244,244,0.5)) | | Row Selected | The row's data is contained in the Table's custom state 'items\_' | Row background changes to light gray and the checkbox icon changes to a filled check with black background | | Checkbox Checked | Row is present in the Table's custom state 'items\_' | Checkbox icon switches from an empty square (feather square) to a checkmark (feather check) with black fill | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | Icon - Checkbox (Table 05) is clicked (when row IS already selected) | Removes the current row's data from the Table's custom state 'items\_' using minus\_element, effectively deselecting the row | | Icon - Checkbox (Table 05) is clicked (when row is NOT selected) | Adds the current row's data to the Table's custom state 'items\_' using plus\_element, effectively selecting the row | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Table 06 Source: https://docs.brikl.co/components/elements/tables/table-06 Multi-column data table with sticky header row, displaying programming language metadata in structured columns. ![Table 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tables/table-dense.png) ## Overview Table 06 is a structured data table component designed to display tabular information across multiple columns including Name, Typing, Paradigm, Release Year, Developer, Extension, Latest Version, and Popularity. It features a styled header row with a light background and uses Bubble's native Table element for organized, readable data presentation. It is suited for displaying reference or comparison data such as programming language details. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Table 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------- | --------------------------------------- | -------------------------------------------------------------------------------------------- | | Hovered Row | Mouse hover over a table cross axis row | Row background changes to a light gray (rgba(245,244,244,0.5)) to indicate hover interaction | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Table 07 Source: https://docs.brikl.co/components/elements/tables/table-07 A structured data table with checkboxes, status, balance, email, and location columns. ![Table 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tables/table-data-table-with-checkbox.png) ## Overview Table 07 is a multi-column data table component designed for web applications. It features a header row with sortable-style columns (Name, Status, Balance, Email, Location) and a select-all checkbox mechanism. The table supports row-level item selection via checkboxes, tracking selected items through custom states on the table element. It is ideal for displaying lists of users or records with bulk selection functionality. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Table 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | No items selected | No items exist in the custom state list (count equals 0) | The select-all checkbox icon shows a white background with no check mark (empty square appearance) | | All items selected | The count of selected items equals the total count of available list data | The select-all checkbox icon shows a filled dark background with a check mark (feather check icon) | | Partial items selected | Some but not all items are selected (count not equal to total and count not equal to 0) | The select-all checkbox icon shows a minus icon with a gray color indicating partial selection | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | | Icon - Checkbox Select All is clicked (no condition) | Sets the table's custom state 'custom.items\_' to the full list data from the ancestor Table element, selecting all items | | Icon - Checkbox Select All is clicked (when all items are already selected) | Clears the table's custom state 'custom.items\_', deselecting all items | | Icon - Checkbox Select Item is clicked (when current row item is not in selected list) | Adds the current row's TableCrossAxis data item to the table's 'custom.items\_' custom state list | | Icon - Checkbox Select Item is clicked (when current row item is already in selected list) | Removes the current row's TableCrossAxis data item from the table's 'custom.items\_' custom state list | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Table 08 Source: https://docs.brikl.co/components/elements/tables/table-08 A multi-column data table with avatar, name, status, email, location, and balance columns. ![Table 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tables/table-with-image.png) ## Overview Table 08 is a structured data table component designed for web applications. It displays tabular user data across six columns: Name (with avatar), Status, Balance, Email, and Location. The table features a sticky header row, hover state highlighting on rows, responsive font sizing for mobile breakpoints, and right-aligned balance column. It is suited for dashboards or admin panels where user records need to be displayed in a clean, organized format. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Table 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------- | | Row Hover | Mouse hover over a table row (TableCrossAxis) | Row background changes to a light gray (rgba(245,244,244,0.5)) | | Mobile Font Size | Current page width is less than the built-in mobile breakpoint | Text elements reduce font size to 14px for better readability on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Tabs 01 Source: https://docs.brikl.co/components/elements/tabs/tabs-01 Horizontal tab bar with three pill-style buttons on a rounded gray container. ![Tabs 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-simple-filled.png) ## Overview Tabs 01 is a navigational tab component featuring three tab buttons (Tab 1, Tab 2, Tab 3) arranged in a horizontal row. It uses a custom state on the parent group to track the currently active tab, visually highlighting the selected tab with a white background and shadow while inactive tabs appear as plain text. Clicking any tab updates the shared state, enabling conditional visibility or content switching elsewhere on the page. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | Hovered | User hovers over any tab button | Tab button font color darkens to rgba(113,113,123,1) from its default muted color | | Active / Selected | The parent group's custom state 'tabs\_item\_' equals the button's own 'item\_' custom state value | Active tab gets a white background, dark font color rgba(27,23,24,1), and a subtle drop shadow, distinguishing it from inactive tabs | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | --------------------- | -------------------------------------------------------------------------------------------------------------------- | | BT - Tab 1 is clicked | Sets the parent group's (GP - Tabs 01) custom state 'tabs\_item\_' to the value of Tab 1's 'item\_' custom state (1) | | BT - Tab 2 is clicked | Sets the parent group's (GP - Tabs 01) custom state 'tabs\_item\_' to the value of Tab 2's 'item\_' custom state (2) | | BT - Tab 3 is clicked | Sets the parent group's (GP - Tabs 01) custom state 'tabs\_item\_' to the value of Tab 3's 'item\_' custom state (3) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 02 Source: https://docs.brikl.co/components/elements/tabs/tabs-02 Horizontal tab bar with three pill-style buttons in a rounded white container. ![Tabs 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-gray-background.png) ## Overview Tabs 02 is a navigation tab component featuring three tab buttons (Tab 1, Tab 2, Tab 3) arranged in a horizontal row. It uses a custom state on the parent group to track the currently active tab, highlighting the selected tab with a light background and dark text while inactive tabs remain muted. Clicking any tab updates the shared state, enabling other elements on the page to conditionally show or hide content based on the active tab index. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | Hovered | User hovers over any tab button | Font color changes to a slightly darker muted tone (rgba(113,113,123,1)) | | Active Tab | The parent group's custom state 'tabs\_item\_' equals the button's own 'item\_' custom state value | Button background changes to light gray (rgba(245,244,244,1)) and font color changes to dark (rgba(27,23,24,1)) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | ------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 02) is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 1's item\_ value (1) | | BT - Tab 2 (Tabs 02) is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 2's item\_ value (2) | | BT - Tab 3 (Tabs 02) is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 3's item\_ value (3) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 03 Source: https://docs.brikl.co/components/elements/tabs/tabs-03 Horizontal tab bar with three pill-style buttons in a dark rounded row layout. ![Tabs 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-black-background-rounded.png) ## Overview Tabs 03 is a horizontal navigation tab component featuring three clickable tab buttons (Tab 1, Tab 2, Tab 3). It uses custom states to track the active tab and visually highlights the selected tab with a dark background and white text, while inactive tabs display muted text. Transitions are animated with ease effects for a smooth user experience. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | Hovered Tab | User hovers over any tab button | Tab text color changes to a slightly more opaque zinc/gray color (rgba(113,113,123,1)) | | Active Tab | The parent group's custom state 'tabs\_item\_' matches the button's own 'item\_' custom state value | Active tab gets a dark background (rgba(27,23,24,1)) and white text, indicating it is the currently selected tab | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 03) is clicked | Sets the parent group's (GP - Tabs 03) custom state 'tabs\_item\_' to the value of Tab 1's 'item\_' custom state (1), marking Tab 1 as active | | BT - Tab 2 (Tabs 03) is clicked | Sets the parent group's (GP - Tabs 03) custom state 'tabs\_item\_' to the value of Tab 2's 'item\_' custom state (2), marking Tab 2 as active | | BT - Tab 3 (Tabs 03) is clicked | Sets the parent group's (GP - Tabs 03) custom state 'tabs\_item\_' to the value of Tab 3's 'item\_' custom state (3), marking Tab 3 as active | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 04 Source: https://docs.brikl.co/components/elements/tabs/tabs-04 Horizontal tab bar with three underline-style tab buttons in a row layout. ![Tabs 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-bottom-border.png) ## Overview Tabs 04 is a horizontal navigation tab component featuring three tab buttons (Tab 1, Tab 2, Tab 3) arranged in a row. It uses a custom state on the parent group to track the active tab, highlighting the selected tab with a dark bottom border and darker font color. Each tab button has hover and active states with smooth color transitions, making it suitable for switching between content sections in both web and mobile layouts. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | | Hover State | User hovers over any tab button | Tab label text color changes to rgba(113,113,123,1), slightly more opaque than the default muted color | | Active/Selected State | The parent group's custom state 'tabs\_item\_' equals the tab button's own 'item\_' custom state value | Tab label font color changes to dark rgba(27,23,24,1) and a solid dark bottom border (2px) appears beneath the active tab | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 04) is clicked | Sets the parent group's custom state 'tabs\_item\_' to the value of Tab 1's 'item\_' custom state (value: 1), marking Tab 1 as active | | BT - Tab 2 (Tabs 04) is clicked | Sets the parent group's custom state 'tabs\_item\_' to the value of Tab 2's 'item\_' custom state (value: 2), marking Tab 2 as active | | BT - Tab 3 (Tabs 04) is clicked | Sets the parent group's custom state 'tabs\_item\_' to the value of Tab 3's 'item\_' custom state (value: 3), marking Tab 3 as active | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 05 Source: https://docs.brikl.co/components/elements/tabs/tabs-05 Horizontal tab bar with three text tabs, separators, and underline active indicator style. ![Tabs 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-bottom-border-filled.png) ## Overview Tabs 05 is a horizontal navigation tab component featuring three clickable tab buttons (Tab 1, Tab 2, Tab 3) with an underline-style active indicator. It uses a custom state on the parent group to track the currently selected tab, visually highlighting the active tab with a bottom border and background change while providing hover states for interactivity. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | Hover State | User hovers over any tab button | Tab font color changes to rgba(113,113,123,1) with a 200ms ease transition | | Active/Selected State | The parent group's custom state 'tabs\_item\_' matches the tab button's own 'item\_' custom state value | Tab background changes to rgba(245,244,244,1), font color changes to rgba(27,23,24,1), and a 2px inset bottom border appears in rgba(27,23,24,1) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | ------------------------------------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 05) is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 1's item\_ value (1), marking it as the active tab | | BT - Tab 2 (Tabs 05) is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 2's item\_ value (2), marking it as the active tab | | BT - Tab 3 (Tabs 05) is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 3's item\_ value (3), marking it as the active tab | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 06 Source: https://docs.brikl.co/components/elements/tabs/tabs-06 Horizontal tab bar with three icon-label buttons on a rounded light gray container. ![Tabs 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-simple-with-icon.png) ## Overview Tabs 06 is a three-tab navigation component built in Bubble.io. It uses a group with a row layout containing three buttons (Tab 1, Tab 2, Tab 3), each with an icon and label. A custom state on the parent group tracks the active tab, and conditional states on each button change their appearance (white background, dark text, shadow) when selected. Clicking any tab updates the group's custom state to highlight the active tab. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | Hovered | User hovers over a tab button | Font color and icon color change to rgba(113,113,123,1), slightly more opaque than the default | | Active / Selected | Parent group's custom state 'tabs\_item\_' equals the button's own 'item\_' custom state value | Button gains a white background, dark text (rgba(27,23,24,1)), dark icon, and a subtle drop shadow | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | -------------------------------------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 06) is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 1's 'item\_' value (1), making Tab 1 the active tab | | BT - Tab 2 (Tabs 06) is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 2's 'item\_' value (2), making Tab 2 the active tab | | BT - Tab 3 (Tabs 06) is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 3's 'item\_' value (3), making Tab 3 the active tab | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 07 Source: https://docs.brikl.co/components/elements/tabs/tabs-07 Dark-themed horizontal tab bar with three icon-label buttons in a rounded row layout. ![Tabs 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-black-background-rounded-with-icon.png) ## Overview Tabs 07 is a horizontal navigation tab component featuring three clickable tab buttons (Tab 1, Tab 2, Tab 3), each with an icon and label. It uses a dark background style with a custom state system to track and highlight the currently active tab, switching the selected tab to a filled dark background with white text while inactive tabs display muted gray text. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | Hovered | User hovers over any tab button | Font color and icon color change to a stronger gray rgba(113,113,123,1) | | Active / Selected | The parent group's custom state 'tabs\_item\_' matches the button's own 'item\_' custom state value | Button background fills with dark color rgba(27,23,24,1), font and icon color change to white rgba(255,255,255,1) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------- | -------------------------------------------------------------------------------------------------------- | | Tab 1 button is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 1's item\_ value (1), marking Tab 1 as active | | Tab 2 button is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 2's item\_ value (2), marking Tab 2 as active | | Tab 3 button is clicked | Sets the parent group's custom state 'tabs\_item\_' to Tab 3's item\_ value (3), marking Tab 3 as active | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 08 Source: https://docs.brikl.co/components/elements/tabs/tabs-08 Vertical tab navigation with three icon-label buttons separated by dividers, underline active style. ![Tabs 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-bottom-border-filled-with-icon.png) ## Overview Tabs 08 is a vertical sidebar-style tab navigation component featuring three clickable tab buttons (Tab 1, Tab 2, Tab 3), each with a Phosphor icon and label. It uses a custom state to track the active tab and highlights the selected tab with a background color and bottom border indicator. Divider shapes visually separate the tabs. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Hovered | Mouse hover over any tab button | Font color and icon color change to a darker gray rgba(113,113,123,1) | | Active / Selected | The parent group's custom state 'tabs\_item\_' equals the button's own 'item\_' custom state value | Tab button gets a light background rgba(245,244,244,1), dark font and icon color rgba(27,23,24,1), and a 2px inset bottom border in dark color rgba(27,23,24,1) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 08) is clicked | Sets the parent group's custom state 'tabs\_item\_' to the value of Tab 1's 'item\_' custom state (1), making Tab 1 the active tab | | BT - Tab 2 (Tabs 08) is clicked | Sets the parent group's custom state 'tabs\_item\_' to the value of Tab 2's 'item\_' custom state (2), making Tab 2 the active tab | | BT - Tab 3 (Tabs 08) is clicked | Sets the parent group's custom state 'tabs\_item\_' to the value of Tab 3's 'item\_' custom state (3), making Tab 3 the active tab | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 09 Source: https://docs.brikl.co/components/elements/tabs/tabs-09 Horizontal tab bar with three icon-label buttons using underline active indicator on white background. ![Tabs 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-with-icon-and-text-bottom-border.png) ## Overview Tabs 09 is a horizontal navigation tab component featuring three clickable tab buttons (Tab 1, Tab 2, Tab 3), each with an icon and label. It uses a custom state on the parent group to track the active tab, highlighting the selected tab with a dark underline border and darker text color. Inactive tabs display muted text, and a hover state slightly increases text opacity. Workflows connect each button click to update the active tab state, making it suitable for switching between content sections. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | Hover State | User hovers over any tab button | Tab text and icon color changes to a slightly more opaque zinc tone (rgba 113,113,123,1) | | Active Tab State | The parent group's custom state 'tabs\_item\_' matches the button's own 'item\_' custom state value | Tab text and icon color change to dark (rgba 27,23,24,1) and a solid bottom border appears indicating the active tab | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | ----------------------------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 09) is clicked | Sets the parent group's custom state 'tabs\_item\_' to the value of Tab 1's 'item\_' custom state (1) | | BT - Tab 2 (Tabs 09) is clicked | Sets the parent group's custom state 'tabs\_item\_' to the value of Tab 2's 'item\_' custom state (2) | | BT - Tab 3 (Tabs 09) is clicked | Sets the parent group's custom state 'tabs\_item\_' to the value of Tab 3's 'item\_' custom state (3) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 10 Source: https://docs.brikl.co/components/elements/tabs/tabs-10 Vertical column tab group with three icon-text buttons on a light background, switching content panels. ![Tabs 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-vertical-menu-only-icon-with-content.png) ## Overview Tabs 10 is a vertical tab navigation component featuring three clickable tab buttons (Tab 1, Tab 2, Tab 3) each with an icon and label, arranged in a column layout. It uses a custom state to track the active tab and conditionally shows/hides corresponding content panels. The active tab highlights with a white background while inactive tabs remain muted, providing clear visual feedback for the selected section. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | | Hover State | User hovers over any tab button | Font color and icon color change to rgba(113,113,123,1), slightly more opaque | | Active Tab State | The tabs group custom state 'tabs\_item' equals the button's custom state 'item' | Active tab button gets white background (rgba(255,255,255,1)) and dark icon color (rgba(27,23,24,1)) | | Content Visibility State | The tabs group custom state 'tabs\_item' equals the corresponding tab's 'item' value | The matching content text element becomes visible; others remain hidden | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | ---------------------------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 10) is clicked | Sets the 'tabs\_item' custom state on the tabs group to the value of Tab 1's 'item' custom state (1) | | BT - Tab 2 (Tabs 10) is clicked | Sets the 'tabs\_item' custom state on the tabs group to the value of Tab 2's 'item' custom state (2) | | BT - Tab 3 (Tabs 10) is clicked | Sets the 'tabs\_item' custom state on the tabs group to the value of Tab 3's 'item' custom state (3) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 11 Source: https://docs.brikl.co/components/elements/tabs/tabs-11 Vertical tab navigation with three options in a column layout on a light gray background. ![Tabs 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-vertical-only-text-with-content.png) ## Overview Tabs 11 is a vertical tab navigation component featuring three clickable tab buttons (Option 1, Option 2, Option 3) arranged in a column. Each tab has an icon and label, and selecting a tab updates a custom state that controls which content panel is visible. The active tab is visually highlighted with a white background and dark text, while inactive tabs appear muted. It is suitable for organizing content into switchable sections. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 11** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | Hover State | User hovers over any tab button | Tab label text color changes to a more opaque gray (rgba(113,113,123,1)) | | Active Tab State | The parent group's custom state 'tabs\_item\_' equals the button's own 'item\_' custom state value | Active tab gets a white background and dark text (rgba(27,23,24,1)), inactive tabs remain transparent with muted text | | Content Visibility State | The parent group's custom state 'tabs\_item\_' matches the corresponding content element's tab index | The matching content text element becomes visible; others remain hidden | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 11) is clicked | Sets the 'tabs\_item\_' custom state on the parent tabs group to the value of Tab 1's 'item\_' custom state (1), switching the active tab to Option 1 | | BT - Tab 2 (Tabs 11) is clicked | Sets the 'tabs\_item\_' custom state on the parent tabs group to the value of Tab 2's 'item\_' custom state (2), switching the active tab to Option 2 | | BT - Tab 3 (Tabs 11) is clicked | Sets the 'tabs\_item\_' custom state on the parent tabs group to the value of Tab 3's 'item\_' custom state (3), switching the active tab to Option 3 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Tabs 12 Source: https://docs.brikl.co/components/elements/tabs/tabs-12 Vertical tab navigation with three icon-label buttons and a content area below, dark-accented style. ![Tabs 12](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tabs/tabs-vertical-only-text-with-border.png) ## Overview Tabs 12 is a vertical tab navigation component featuring three clickable tab buttons (Option 1, Option 2, Option 3) each with an icon and label. It uses a custom state to track the active tab, highlighting the selected tab with a solid left border and darker font color. A content area below the tab list conditionally shows content based on the active tab selection, making it ideal for segmented content switching in both web and mobile layouts. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Tabs 12** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------ | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Hovered Tab | Mouse hover over any tab button | Font color and icon color transition to a more opaque zinc tone (rgba(113,113,123,1)) with ease animation over 200ms | | Active Tab | The parent group's custom state 'tabs\_item\_' equals the button's own 'item\_' custom state value | Font color and icon color change to dark (rgba(27,23,24,1)) and a solid 2px left border appears in the same dark color, visually indicating the selected tab | | Content Visibility | The parent group's custom state 'tabs\_item\_' equals the corresponding tab's 'item\_' value | The respective content text element becomes visible; all others remain hidden and collapsed | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | BT - Tab 1 (Tabs 12) is clicked | Sets the 'tabs\_item\_' custom state on the parent tabs group to the value of Tab 1's 'item\_' custom state (1), switching the active tab to Option 1 | | BT - Tab 2 (Tabs 12) is clicked | Sets the 'tabs\_item\_' custom state on the parent tabs group to the value of Tab 2's 'item\_' custom state (2), switching the active tab to Option 2 | | BT - Tab 3 (Tabs 12) is clicked | Sets the 'tabs\_item\_' custom state on the parent tabs group to the value of Tab 3's 'item\_' custom state (3), switching the active tab to Option 3 | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Textarea 01 Source: https://docs.brikl.co/components/elements/textareas/textarea-01 Vertical column layout with a label text above a styled multiline textarea input field. ![Textarea 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-simple.png) ## Overview Textarea 01 is a simple multiline text input component designed for collecting user comments or longer-form text. It includes a label ('Simple Textarea'), a placeholder-enabled input field with rounded borders and subtle shadow styling, and supports focused, invalid, and disabled visual states for clear user feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | Focused | User clicks or focuses the MultilineInput element | Adds a soft box shadow (rgba(216,211,212,0.5)) with a spread of 3 around the input to indicate active focus | | Invalid | Input fails validation (isnt\_valid condition) | Border changes to red (rgba(251,44,54,1)) and a red-tinted box shadow (rgba(251,44,54,0.2)) appears around the input | | Disabled | Element is not clickable (isnt\_clickable condition) | Opacity of the input is reduced to 50%, visually indicating it is inactive | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Label text font size reduces to 14px for smaller screen optimization | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Textarea 02 Source: https://docs.brikl.co/components/elements/textareas/textarea-02 Vertical column group with label, helper text, and a multiline textarea input field. ![Textarea 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-with-helper-text.png) ## Overview Textarea 02 is a free, responsive textarea component that includes a label, a helper/description text, and a styled multiline input field. It is designed for collecting longer user input such as comments or descriptions, with built-in visual states for focus, validation error, and disabled conditions. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- | | Focused | User clicks or focuses the textarea input | Adds a soft shadow ring (rgba(216,211,212,0.5)) around the input to indicate active focus | | Invalid | Input fails validation (isnt\_valid condition) | Border turns red (rgba(251,44,54,1)) and a red shadow ring (rgba(251,44,54,0.2)) appears around the input | | Disabled | Input is not clickable (isnt\_clickable condition) | Opacity of the input is reduced to 50%, indicating a disabled state | | Mobile | Page width is less than the built-in mobile breakpoint | Font size of label and helper text adjusts to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Textarea 03 Source: https://docs.brikl.co/components/elements/textareas/textarea-03 Vertical column layout with label row, optional tag, and a multi-line textarea input field. ![Textarea 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-with-hint.png) ## Overview Textarea 03 is a free, responsive textarea component featuring a label row with an 'Optional' hint tag and a styled multi-line input field. It is designed for collecting longer-form user text input such as comments or messages, with visual feedback states for focus, validation error, and disabled conditions. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | | Focused | User clicks or focuses the textarea input | Adds a soft spread box shadow (rgba(216,211,212,0.5), spread 3) around the input to indicate active focus | | Invalid | Input fails validation check | Border changes to red (rgba(251,44,54,1)) and a red-tinted box shadow (rgba(251,44,54,0.2), spread 3) appears | | Disabled | Input is not clickable | Opacity of the textarea is reduced to 50%, visually indicating it is inactive | | Mobile Breakpoint | Page width is less than the built-in mobile breakpoint | Font size of the label texts adjusts to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Textarea 04 Source: https://docs.brikl.co/components/elements/textareas/textarea-04 Vertical column layout with a label text and a gray-background multiline textarea input below. ![Textarea 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-with-gray-background.png) ## Overview Textarea 04 is a free, responsive textarea component featuring a gray background input field with a label. It is designed for collecting multi-line user input such as comments, and includes a focus state that adds a visible border and box shadow to improve accessibility and usability on both web and mobile platforms. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | Focused | User clicks or taps the MultilineInput field | A solid border (rgba(216,211,212,1)) and an outset box shadow (rgba(216,211,212,0.5)) appear around the textarea to indicate active focus | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | The label text font size reduces to 14px for better fit on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component is available on the free plan. # Textarea 05 Source: https://docs.brikl.co/components/elements/textareas/textarea-05 Vertical column layout with a label, multiline textarea, and a secondary send button below. ![Textarea 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-with-left-button.png) ## Overview Textarea 05 is a comment/message input component featuring a descriptive label, a resizable multiline text input field with placeholder text, and a secondary 'Send' button with an icon. It is designed for collecting user input such as comments or messages, and is suitable for forms, chat interfaces, or feedback sections. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ------------------------------------- | ---------------------------------------------------------------------------------------- | | Focused | MultilineInput is focused by the user | Adds a soft shadow (blur 0, spread 3) around the textarea to indicate active focus | | Invalid | MultilineInput fails validation | Border turns red (rgba(251,44,54,1)) and a red-tinted shadow appears around the textarea | | Disabled (Input) | MultilineInput is not clickable | Textarea opacity reduces to 50%, indicating a disabled state | | Button Hovered | Send button is hovered | Button background changes to a light gray (rgba(245,244,244,1)) | | Disabled (Button) | Send button is not clickable | Button opacity reduces to 50%, indicating a disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Textarea 06 Source: https://docs.brikl.co/components/elements/textareas/textarea-06 Vertical column layout with a label, expandable textarea, and a right-aligned send button. ![Textarea 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-with-right-button.png) ## Overview Textarea 06 is a comment input component featuring a labeled multiline text field paired with a 'Send' action button. It is designed for user input scenarios such as comment forms or message submissions, offering focus and validation states for a polished interactive experience. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------- | ----------------------------------------- | --------------------------------------------------------------------------- | | Focused | Textarea receives focus | Adds a soft colored box shadow around the textarea to indicate active input | | Invalid | Textarea fails validation | Border turns red and a red-tinted box shadow appears around the textarea | | Disabled (Textarea) | Textarea is not clickable | Textarea opacity reduces to 50%, indicating a disabled state | | Hovered (Button) | Send button is hovered | Button background changes to a light gray color | | Disabled (Button) | Send button is not clickable | Button opacity reduces to 50%, indicating a disabled state | | Mobile Breakpoint (Label) | Page width is less than mobile breakpoint | Label font size adjusts to 14px for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Textarea 07 Source: https://docs.brikl.co/components/elements/textareas/textarea-07 Vertical column layout with a label, multiline textarea input, and a secondary send button. ![Textarea 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-with-button.png) ## Overview Textarea 07 is a comment or message input component featuring a labeled multiline text area with a 'Send' secondary button below. It is designed for user input scenarios such as leaving comments, sending messages, or submitting feedback. The component includes focus, validation error, and disabled visual states for the textarea, as well as hover and disabled states for the button. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------- | | Focused | MultilineInput is focused by the user | Adds a soft box shadow (rgba(216,211,212,0.5)) around the textarea to indicate active focus | | Invalid | MultilineInput fails validation | Border changes to red (rgba(251,44,54,1)) and a red-tinted box shadow appears around the textarea | | Disabled (Input) | MultilineInput is not clickable | Textarea opacity reduces to 50%, indicating a disabled state | | Button Hovered | Send button is hovered | Button background changes to light gray (rgba(245,244,244,1)) | | Disabled (Button) | Send button is not clickable | Button opacity reduces to 50%, indicating a disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Textarea 08 Source: https://docs.brikl.co/components/elements/textareas/textarea-08 Vertical textarea group with label, character counter, and multiline input field. ![Textarea 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-with-characters-left.png) ## Overview Textarea 08 is a multiline text input component that includes a label, a live character countdown display, and a styled textarea. It enforces a 180-character limit and dynamically shows how many characters remain as the user types, making it ideal for comment boxes, feedback forms, or any input where length constraints need to be communicated clearly. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------- | | Focused | User clicks or focuses the textarea input | Adds a soft box shadow (spread 3) around the textarea to indicate active focus | | Invalid | Input fails validation (isnt\_valid condition) | Border changes to red (rgba(251, 44, 54, 1)) and a red-tinted box shadow appears | | Disabled | Input is not clickable (isnt\_clickable condition) | Opacity of the textarea is reduced to 50% | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Font size of the label and character counter text adjusts to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Textarea 09 Source: https://docs.brikl.co/components/elements/textareas/textarea-09 Textarea with overlapping label positioned above the input field, minimal style. ![Textarea 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-with-overlapping-label.png) ## Overview Textarea 09 is a multi-line text input component featuring an overlapping label that sits above the input border. It includes character limit enforcement, focus and validation states with shadow effects, and a disabled/non-clickable opacity state, making it suitable for forms requiring labeled, constrained text entry. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | Focused | Input element receives focus | Adds an outset box shadow with a soft gray color (rgba(216,211,212,0.5)) and 3px spread around the textarea | | Invalid | Input value fails validation | Border turns red (rgba(251,44,54,1)) and a red-tinted box shadow (rgba(251,44,54,0.2)) appears with 3px spread | | Disabled | Input is not clickable | Opacity reduces to 50%, visually indicating the field is inactive | | Mobile Breakpoint | Page width is less than built-in mobile breakpoint | Label font size increases from 12px to 14px for better readability on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Textarea 10 Source: https://docs.brikl.co/components/elements/textareas/textarea-10 Rounded bordered textarea with inset label, focus/error states, and character limit. ![Textarea 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Textareas/textarea-with-inset-label.png) ## Overview Textarea 10 is a multi-line text input component featuring an inset label positioned above the input field, housed inside a styled group container. It includes a character limit of 180 characters, smooth transition effects, and conditional visual states for focus, validation error, and disabled interactions. Designed for forms requiring labeled text areas with clear user feedback. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Textarea 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | Focused | When the MultilineInput element is focused | Adds a soft box shadow (rgba(216,211,212,0.5)) with spread of 3 around the group container | | Invalid | When the MultilineInput element fails validation | Border changes to red (rgba(251,44,54,1)) and a red-tinted box shadow appears around the group container | | Disabled | When the MultilineInput element is not clickable | The group container opacity is reduced to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 01 Source: https://docs.brikl.co/components/elements/timelines/timeline-01 Vertical timeline with circular indicators, separators, and date, title, description text columns. ![Timeline 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-simple.png) ## Overview Timeline 01 is a vertical timeline component displaying a sequence of project milestones or events. Each timeline item includes a circular indicator, a vertical separator line, a date label, a title, and a description. It is designed to visually communicate progress through ordered steps or phases, such as project stages, onboarding flows, or historical events. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 02 Source: https://docs.brikl.co/components/elements/timelines/timeline-02 Vertical timeline with circular indicators, separators, dates, titles, and description text in a column layout. ![Timeline 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-with-date-title-and-description.png) ## Overview Timeline 02 is a vertical timeline UI component designed to display a sequence of events or milestones. Each timeline item includes a circular indicator, a separator line, a date label, a title, and a description. It supports responsive behavior by conditionally showing or hiding the date element based on page width, making it suitable for both web and mobile layouts. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------ | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile/Narrow View | Current Page Width is less than or equal to 576px | The date text displayed outside the title/description group is hidden, and the date text inside the title/description group becomes visible instead | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 03 Source: https://docs.brikl.co/components/elements/timelines/timeline-03 Vertical timeline with circular indicators, separators, and stacked title, description, and date text. ![Timeline 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-with-date-top-title-and-description.png) ## Overview Timeline 03 is a vertical timeline UI component designed to display a sequence of project milestones or events. Each timeline item includes a circular dot indicator connected by a vertical separator line, alongside a date label, bold title, and descriptive text. It is ideal for project tracking, progress visualization, or step-by-step process displays. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 04 Source: https://docs.brikl.co/components/elements/timelines/timeline-04 Vertical timeline with circular indicators, separators, titles, descriptions, and timestamps in column layout. ![Timeline 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-with-date-bottom-title-and-description.png) ## Overview Timeline 04 is a vertical timeline component designed to display a sequence of events or activities. Each timeline item includes a circular dot indicator connected by a vertical separator line, alongside a title, description, and relative timestamp. It is ideal for showing activity feeds, deployment logs, progress steps, or audit trails in both web and mobile interfaces. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 05 Source: https://docs.brikl.co/components/elements/timelines/timeline-05 Vertical timeline with icon indicators, separators, and title/description/date text columns. ![Timeline 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-with-date-top-title-description-and-icon.png) ## Overview Timeline 05 is a vertical timeline UI component designed to display a sequence of events or project milestones. Each timeline item includes a circular icon indicator, a separator line connecting items, and a text block showing a date, title, and description. It is suitable for project progress tracking, onboarding flows, or any step-by-step process visualization. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------ | ------------------------------------------- | ---------------------------------------------------------------------------------------------- | | Completed | Timeline item represents a finished step | Indicator circle uses dark background (rgba(27,23,24,1)) with a visible check icon | | Pending / Upcoming | Timeline item represents an incomplete step | Separator line uses light color (rgba(245,244,244,1)) indicating the step has not been reached | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 06 Source: https://docs.brikl.co/components/elements/timelines/timeline-06 Vertical timeline with icon indicators, separators, titles, descriptions, and timestamps in a column layout. ![Timeline 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-with-date-bottom-title-description-and-icon.png) ## Overview Timeline 06 is a vertical timeline UI component designed to display a sequence of events or activities. Each timeline item includes a styled icon indicator with a connecting separator line, a bold title, a descriptive text, and a relative timestamp. It is suited for activity feeds, changelog displays, deployment pipelines, or any ordered event history. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 07 Source: https://docs.brikl.co/components/elements/timelines/timeline-07 Vertical timeline with avatars, separators, author labels, and bordered message bubbles in column layout. ![Timeline 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-user-flow-with-avatar-02.png) ## Overview Timeline 07 is a vertical activity feed component that displays a sequence of timeline events, each showing a user avatar, a separator line, an author action label, and a bordered message card with content and timestamp. It is designed for use cases such as issue trackers, comment threads, or activity logs where chronological user interactions need to be displayed in a structured and readable format. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 08 Source: https://docs.brikl.co/components/elements/timelines/timeline-08 Vertical timeline list with four items showing event descriptions and timestamps, bordered rows. ![Timeline 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-with-block-filled.png) ## Overview Timeline 08 is a vertical log/activity timeline component displaying a list of chronological events. Each item contains an event description and a timestamp, separated by bottom borders. It is ideal for system logs, audit trails, activity feeds, or any time-ordered sequence of events. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 09 Source: https://docs.brikl.co/components/elements/timelines/timeline-09 Vertical timeline with avatar, icon, and activity text rows separated by bottom borders. ![Timeline 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-activity-02.png) ## Overview Timeline 09 is a vertical activity feed component displaying a list of user actions (e.g., wrote a post, replied to a comment, edited a post). Each item includes a circular avatar image, an action icon, and a descriptive text label with a timestamp. It is designed to show recent user activity in a clean, structured list format with subtle dividers. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Timeline 10 Source: https://docs.brikl.co/components/elements/timelines/timeline-10 Vertical timeline with circular indicators, separators, dates, titles, and descriptions in column layout. ![Timeline 10](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Timelines/timeline-horizontal-with-date-top-and-content-bottom.png) ## Overview Timeline 10 is a vertical timeline component that displays a series of chronological events or milestones. Each timeline item consists of a circular dot indicator connected by a separator line, paired with a date, title, and short description. It is ideal for project progress tracking, history displays, or step-by-step processes. ## How to use Navigate to the **Elements** category in the Brikl panel. Find **Timeline 10** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Banner 01 Source: https://docs.brikl.co/components/marketing/banners/banner-01 Horizontal cookie consent banner with descriptive text and Accept/Decline action buttons. ![Banner 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Banners/banner-cookies.png) ## Overview Banner 01 is a cookie consent notification bar designed to inform users about cookie usage and collect their consent. It features a text message explaining the purpose of cookies alongside two action buttons — 'Accept' and 'Decline' — arranged in a horizontal row layout. The component is compact, styled with subtle shadows and rounded corners, and is suitable for displaying at the top or bottom of a page as a non-intrusive consent prompt. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Banner 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | ----------------------------------------- | ----------------------------------------------------------------- | | Accept Button Hovered | User hovers over the Accept button | Accept button opacity reduces to 90% | | Accept Button Disabled | Accept button is not clickable | Accept button opacity reduces to 50% | | Decline Button Hovered | User hovers over the Decline button | Decline button background changes to rgba(245, 244, 244, 1) | | Decline Button Disabled | Decline button is not clickable | Decline button opacity reduces to 50% | | Mobile Layout | Page width is less than or equal to 769px | Text element width expands to 100% to accommodate smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Banner 02 Source: https://docs.brikl.co/components/marketing/banners/banner-02 Dark horizontal banner with announcement text and a right-arrow icon on a black background. ![Banner 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Banners/banner-announcement.png) ## Overview Banner 02 is a compact announcement banner designed for marketing purposes. It displays a short promotional or informational message alongside a directional arrow icon, inviting users to take action. The dark-themed, full-width strip is ideal for placing at the top or bottom of a page to highlight new features, promotions, or important updates. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Banner 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Banner 03 Source: https://docs.brikl.co/components/marketing/banners/banner-03 Dark horizontal banner with icon, descriptive text, and a primary-colored upgrade link. ![Banner 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Banners/banner-upgrade-plan.png) ## Overview Banner 03 is a compact notification/promotional banner component designed to inform users about a feature or offer and prompt them to take action via an 'Upgrade' link. It features a cloud-check icon, a short message, and a styled link button, all arranged in a horizontal row layout on a dark background. It is suitable for upsell or feature-awareness banners at the top or bottom of a page. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Banner 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------------- | --------------------------------------- | | Link Hovered | User hovers over the 'Upgrade' link and it is clickable | Underline is removed from the link text | | Link Disabled | The 'Upgrade' link is not clickable | The link opacity is reduced to 25% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Banner 04 Source: https://docs.brikl.co/components/marketing/banners/banner-04 Dark horizontal banner with icon, announcement text, and a 'Learn more' link on the right. ![Banner 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Banners/banner-update-annoucement.png) ## Overview Banner 04 is a notification/announcement banner component designed to inform users about new features or updates. It features a cloud-check icon alongside descriptive text on the left, and a 'Learn more' link with an arrow icon on the right. The dark-themed bar spans the full width and adapts its layout for mobile screens, making it suitable for top-of-page announcements or promotional messages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Banner 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | Mobile/Narrow Layout | Page width is less than or equal to 769px | The icon & title group expands to 100% width and the link group gains a left margin of 32px to adjust spacing for smaller screens | | Link Disabled State | The 'Learn more' link element is not clickable | The link element reduces to 25% opacity, visually indicating it is inactive or disabled | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Banner 05 Source: https://docs.brikl.co/components/marketing/banners/banner-05 Dark full-width notification banner with icon, message text, learn more link, and close button. ![Banner 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Banners/banner-update-announcement-with-close-icon.png) ## Overview Banner 05 is a dismissible notification banner designed to announce updates or new features. It displays an icon, a short message, a 'Learn more' link, and a close button. The layout adapts responsively for mobile screens, and clicking either close button triggers a workflow that hides the entire banner group. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Banner 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------------------- | ----------------------------------------- | ---------------------------------------- | | Mobile layout - Icon & Title group | Page width is less than or equal to 769px | Icon & Title group width expands to 100% | | Mobile layout - Link group | Page width is less than or equal to 769px | Link group gets a left margin of 32px | | Close button 02 hover | Button (BT - Close 02) is hovered | Button opacity increases to 100% | | Close button 02 mobile visible | Page width is less than or equal to 769px | BT - Close 02 becomes visible | | Close button 01 hover | Button (BT - Close 01) is hovered | Button opacity increases to 100% | | Close button 01 mobile hidden | Page width is less than or equal to 769px | BT - Close 01 becomes hidden | | Link disabled state | Link is not clickable | Link opacity drops to 25% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------ | ------------------------------------------------- | | BT - Close 02 (Banner 05) is clicked | Hides the entire Banner 05 group (GP - Banner 05) | | BT - Close 01 (Banner 05) is clicked | Hides the entire Banner 05 group (GP - Banner 05) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Banner 06 Source: https://docs.brikl.co/components/marketing/banners/banner-06 Dark horizontal banner with icon, text, action buttons, and a close button. ![Banner 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Banners/banner-announcement-with-buttons.png) ## Overview Banner 06 is a dismissible notification or announcement banner designed to inform users about a new feature or update. It displays an icon, a descriptive message, and two action buttons ('Download' and 'Learn More'), along with a close button to hide the banner. It adapts its layout for mobile screens and supports hover and visibility states for interactive feedback. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Banner 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile layout | Page width is less than or equal to 769px | Icon & Title group stretches to 100% width; button group adjusts left margin; mobile close button becomes visible while desktop close button hides | | Close button hover | User hovers over BT - Close 01 or BT - Close 02 | Close button opacity increases to 100% | | Download button hover | User hovers over BT - Download | Background color changes to rgba(245, 244, 244, 1) | | Learn More button hover | User hovers over BT - Learn More | Background color changes to rgba(27, 23, 24, 1) | | Download button disabled | BT - Download is not clickable | Button opacity reduces to 50% | | Learn More button disabled | BT - Learn More is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------ | ---------------------------------------------- | | BT - Close 02 (Banner 06) is clicked | Hides the entire banner group (GP - Banner 06) | | BT - Close 01 (Banner 06) is clicked | Hides the entire banner group (GP - Banner 06) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Banner 07 Source: https://docs.brikl.co/components/marketing/banners/banner-07 Dark banner with icon, title, description, action button, and close button in a horizontal layout. ![Banner 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Banners/banner-announcement-with-icons-and-button.png) ## Overview Banner 07 is a dismissible announcement banner designed for marketing purposes. It features a rocket icon, a bold title, a supporting description, a 'Try Now' call-to-action button, and two close buttons (one for desktop, one for mobile). The banner adapts its layout responsively based on page width, and workflows allow users to hide it upon clicking either close button. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Banner 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------ | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile layout | Current Page Width is less than or equal to 769px | Icon & Title group switches to full width; mobile close button becomes visible; desktop close button is hidden; Buttons group gets a left margin adjustment | | Close button hovered (desktop) | BT - Close 01 is hovered | Opacity increases to 100% | | Close button hovered (mobile) | BT - Close 02 is hovered | Opacity increases to 100% | | Try Now button hovered | BT - Try Now is hovered | Background color changes to rgba(245, 244, 244, 1) | | Try Now button disabled | BT - Try Now is not clickable | Opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------------------- | -------------------------------------------- | | BT - Close 02 (Banner 07) is clicked (mobile) | Hides the main banner group (GP - Banner 07) | | BT - Close 01 (Banner 07) is clicked (desktop) | Hides the main banner group (GP - Banner 07) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Banner 08 Source: https://docs.brikl.co/components/marketing/banners/banner-08 Horizontal banner with centered newsletter text and a subscribe link button. ![Banner 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Banners/banner-newsletter.png) ## Overview Banner 08 is a compact promotional notification bar designed to encourage newsletter sign-ups. It displays a brief promotional message with an emoji and a clickable 'Subscribe' link that opens in a new tab. The banner features a white background with a subtle border and box shadow, making it suitable for placement at the top or bottom of a page as a site-wide announcement strip. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Banner 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------------- | ---------------------------------------------------------- | | Link Hovered | User hovers over the Subscribe link and it is clickable | Underline is removed from the Subscribe link text | | Link Disabled | Subscribe link is not clickable | Subscribe link opacity is reduced to 25%, appearing dimmed | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Banner 09 Source: https://docs.brikl.co/components/marketing/banners/banner-09 Horizontal banner with version badge, descriptive text, and a download action button. ![Banner 09](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Banners/banner-version-update-notification.png) ## Overview Banner 09 is a compact notification/announcement banner designed to inform users about new features or updates. It displays a version label, a short description message, and an 'Update now' button with a download icon, making it ideal for in-app update prompts or feature announcement strips. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Banner 09** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ---------------------------------------- | --------------------------------------------------------- | | Button Hovered | User hovers over the 'Update Now' button | Button background color changes to rgba(245, 244, 244, 1) | | Button Not Clickable | Button is in a non-clickable state | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Blog 01 Source: https://docs.brikl.co/components/marketing/blog-lists/blog-01 Centered blog section with header text and a list of article cards featuring badges, titles, and author info. ![Blog 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Blog/blog-horizontal-duo-bis.png) ## Overview Blog 01 is a marketing component designed to display a list of blog articles in a structured layout. It includes a header section with a title and subtitle, followed by article cards that each contain a category badge, article title, description, and author information with avatar and date. It is intended for web landing pages to showcase recent blog posts or team writings. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Blog 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Mobile/Narrow Layout | Current Page Width is less than or equal to 768px | Header title font size reduces from 36 to 30, and article card minimum width expands to 100% for single-column stacking | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Blog 02 Source: https://docs.brikl.co/components/marketing/blog-lists/blog-02 Blog listing section with header, title, description, article cards, and a 'View All Posts' button. ![Blog 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Blog/blog-header-with-cta-bis.png) ## Overview Blog 02 is a marketing component designed to display a list of blog articles in a structured layout. It includes a header section with a title, subtitle, and a 'View All Posts' button, followed by a grid of article cards featuring badges, titles, and descriptions. It is intended for use on web pages to showcase recent or featured blog content. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Blog 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------- | | Button Hovered | User hovers over the 'View All Posts' button | Button opacity reduces to 90% | | Button Not Clickable | Button is not clickable | Button opacity reduces to 50% | | Responsive - Button Full Width | Page width is 768px or less | View All Posts button stretches to 100% width | | Responsive - Header Title Group Full Width | Page width is 768px or less | Header title and description group stretches to 100% width | | Responsive - Title Font Size Reduced | Page width is 768px or less | Title font size reduces from 36px to 30px | | Responsive - Article Card Full Width | Page width is 1024px or less | Article card stretches to 100% minimum width | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Blog 03 Source: https://docs.brikl.co/components/marketing/blog-lists/blog-03 Blog listing component with article cards featuring image, badge, title, description, and author avatar. ![Blog 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Blog/blog-aside-header-with-cta-bis.png) ## Overview Blog 03 is a marketing blog list component designed for web pages. It displays a curated list of articles, each featuring a cover image, a category badge, a title, a short description, and an author section with avatar, name, and publication date. It is ideal for blog index pages or content showcase sections. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Blog 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------- | --------------------------------------- | --------------------------------------------------------------------- | | Responsive Layout - Wide | Page width less than or equal to 1024px | Article card width expands to 100% to adapt to medium screen sizes | | Responsive Image - Medium | Page width less than or equal to 1024px | Article image minimum height increases to 450px | | Responsive Image - Small | Page width less than or equal to 596px | Article image minimum height reduces to 300px and width resets to 0px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Blog 04 Source: https://docs.brikl.co/components/marketing/blog-lists/blog-04 Centered blog listing with header, article cards, author info, badges, and descriptions. ![Blog 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Blog/blog-with-badges-bis.png) ## Overview Blog 04 is a marketing component designed to display a curated list of blog articles. It features a header section with a title and subtitle, followed by article cards that include titles, descriptions, author names, publication dates, and category badges. It is ideal for showcasing blog content on a website's marketing or content page. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Blog 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------- | | Responsive Header Text | Current Page Width is less than or equal to 768px | The header title font size reduces from 36 to 30 to better fit smaller screens. | | Responsive Article Card | Current Page Width is less than or equal to 1024px | Article card minimum width is set to 100%, stacking cards vertically. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Blog 05 Source: https://docs.brikl.co/components/marketing/blog-lists/blog-05 Blog listing component with article image, badge, title, description, and author avatar row. ![Blog 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Blog/blog-horizontal-article-with-aside-header-bis.png) ## Overview Blog 05 is a marketing blog list component designed for web applications. It displays a curated list of blog articles, each featuring a thumbnail image, a category badge, an article title, a short description, and an author section with an avatar image, author name, and publication date. The layout is structured using nested groups with column and row containers, making it suitable for content-heavy marketing pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Blog 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | Responsive Image State | Current page width is less than or equal to 1280px | The article thumbnail image adjusts its minimum width to 100% and minimum height to 300px for better display on smaller screens. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Blog 06 Source: https://docs.brikl.co/components/marketing/blog-lists/blog-06 Centered blog listing with header badge, title, description, view-all button, and article cards. ![Blog 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Blog/blog-article-cards-with-button-action-bis.png) ## Overview Blog 06 is a marketing blog list component designed for web applications. It features a structured header section with a badge label, a bold title, a subtitle description, and a 'View all articles' button. Below the header, it displays a list of article cards, each containing a title, excerpt text, and a 'Read more' button. The component is ideal for showcasing blog posts or news updates on a landing or marketing page. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Blog 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------------- | ---------------------------------------------------------- | ------------------------------------------------ | | Hover - View All Articles Button | User hovers over the 'View all articles' button | Button background changes to rgba(245,244,244,1) | | Disabled - View All Articles Button | Button is not clickable | Button opacity reduces to 50% | | Hover - Read More Button | User hovers over the 'Read more' button on an article card | Button background changes to rgba(245,244,244,1) | | Disabled - Read More Button | Read more button is not clickable | Button opacity reduces to 50% | | Responsive - Header Title Font Size | Page width is less than or equal to 768px | Header title font size reduces from 36px to 30px | | Responsive - Article Card Width | Page width is less than or equal to 1024px | Article card min-width expands to 100% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Blog 07 Source: https://docs.brikl.co/components/marketing/blog-lists/blog-07 Centered blog section with header badge, title, description, and article cards in a column layout. ![Blog 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Blog/blog-article-cards-with-author-bis.png) ## Overview Blog 07 is a marketing component designed to showcase a list of blog articles. It features a header section with a badge label, a bold headline, and a descriptive subtitle, followed by article cards that include author avatars, author names, read duration badges, article titles, and descriptions. It is intended for use on web pages to drive content discovery and reader engagement. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Blog 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------ | | Responsive Headline | Current Page Width is less than or equal to 768px | The main headline font size reduces from 36px to 30px for smaller screens. | | Responsive Article Card | Current Page Width is less than or equal to 1024px | Article card minimum width changes to 100% to stack cards vertically on smaller viewports. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Careers 02 Source: https://docs.brikl.co/components/marketing/careers/careers-02 Vertical careers section with header, job listings, badges, and position details in clean layout. ![Careers 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Careers/careers-simple-02-bis.png) ## Overview Careers 02 is a marketing component designed to showcase job openings on a website. It features a header section with a hiring tagline, title, and description, followed by a structured list of job positions. Each position includes a title, department badge, short description, and additional details, separated by dividers for visual clarity. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Careers 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile/Tablet Layout | Current Page Width is less than or equal to 768px | Font sizes reduce (e.g., heading shrinks from 36 to 30, body text from 20 to 18, badge text from 16 to 14) and header width adjusts to 100% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Careers 03 Source: https://docs.brikl.co/components/marketing/careers/careers-03 Vertical careers section with header, job title badges, and position listings in a column layout. ![Careers 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Careers/careers-simple-03-bis.png) ## Overview Careers 03 is a marketing component designed to display open job positions on a company website. It features a header section with a tagline and title, followed by a structured list of job positions, each with a title, department badge, and separator. It is built for web use and adapts responsively to different screen widths. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Careers 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | Tablet/Mobile Header | Current Page Width is less than or equal to 768px | Header text font sizes reduce (tagline from 20 to 18, title from 36 to 30, label from 16 to 14) and header width adjusts to 100% | | Tablet Position List Layout | Current Page Width is less than or equal to 1024px | Position list row gap increases to 32 and position wrapper min-width expands to 100% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Careers 04 Source: https://docs.brikl.co/components/marketing/careers/careers-04 Centered careers section with header, filterable category tabs, and listed job positions with details. ![Careers 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Careers/careers-card-01-bis.png) ## Overview Careers 04 is a marketing component designed to display open job positions on a company careers page. It features a header section with a subtitle and title, a horizontal tab navigation for filtering positions by department (View All, Design, Software Engineering, Customer Success, Sales, Marketing), and a list of job cards each showing the position title, a department badge, a short description, and location/work-type details. Tab clicks trigger custom state changes to filter visible positions. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Careers 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Mobile/Tablet layout | Current Page Width is less than or equal to 768px | Header font sizes reduce, row gaps decrease, badge visibility is hidden, and layout adapts for smaller screens | | Active tab selection | User clicks a department tab button | Custom state 'tabs\_item\_' is updated to the clicked tab's item value, filtering the visible job positions accordingly | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ------------------------------------------ | --------------------------------------------------------------------------------------------------- | | Tab Design button is clicked | Sets custom state 'tabs\_item\_' on the tabs container to the Design tab's item value | | Tab Software Engineering button is clicked | Sets custom state 'tabs\_item\_' on the tabs container to the Software Engineering tab's item value | | Tab View All button is clicked | Sets custom state 'tabs\_item\_' on the tabs container to the View All tab's item value | | Tab Customer Success button is clicked | Sets custom state 'tabs\_item\_' on the tabs container to the Customer Success tab's item value | | Tab Sales button is clicked | Sets custom state 'tabs\_item\_' on the tabs container to the Sales tab's item value | | Tab Marketing button is clicked | Sets custom state 'tabs\_item\_' on the tabs container to the Marketing tab's item value | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Careers 05 Source: https://docs.brikl.co/components/marketing/careers/careers-05 Centered careers section with header text, job listings, badges, and position titles in column layout. ![Careers 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Careers/careers-card-03-bis.png) ## Overview Careers 05 is a marketing component designed to showcase open job positions. It features a centered header with a tagline and title, followed by a structured list of job cards displaying position titles and category badges. It is intended for use on company career pages to attract potential candidates. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Careers 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile/Tablet Layout | Page width is less than or equal to 768px | Font sizes reduce (e.g., heading shrinks from 36 to 30, subtext from 20 to 18), row gap adjusts, and certain badge elements toggle visibility for a compact mobile-friendly layout | | Badge Visibility Toggle | Page width is less than or equal to 768px | Primary category badge hides and a secondary badge group becomes visible, adapting the badge layout for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Carrers 01 Source: https://docs.brikl.co/components/marketing/careers/carrers-01 Centered careers section with header, job title badges, descriptions, and location details in column layout. ![Carrers 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Careers/careers-simple-01-bis.png) ## Overview Careers 01 is a marketing component designed to showcase open job positions. It includes a header section with a tagline and title, followed by a list of job positions each displaying a title, department badge, short description, and location detail. It is suited for company careers or hiring pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Carrers 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile layout | Current Page Width is less than or equal to 768px | Header text font size reduces (from 36 to 30 for title, from 20 to 18 for tagline) and job title minimum width expands to 100% for better mobile readability. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Contact 01 Source: https://docs.brikl.co/components/marketing/contact-sections/contact-01 Centered contact section with header, email, phone info cards featuring icons and links. ![Contact 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Contacts/contact-simple-links.png) ## Overview Contact 01 is a marketing contact section component that displays a centered header with a title, subtitle, and description, followed by informational cards for different contact methods (email, phone). Each card includes an icon, a title, a short description, and a clickable link. It is designed for landing pages or website contact sections to help users quickly find ways to reach out. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Contact 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ----------------------------------------- | ------------------------------------------------------------------------------------- | | Mobile font size | Page width is less than 768px | Heading font size reduces from 48px to 36px for better readability on smaller screens | | Link hovered (clickable) | User hovers over a clickable link element | Underline appears on the link text with an ease transition of 200ms | | Link disabled | Link element is not clickable | Link opacity reduces to 25%, indicating a disabled state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Contact 02 Source: https://docs.brikl.co/components/marketing/contact-sections/contact-02 Contact section with header text, info cards featuring icons, descriptions, and email links. ![Contact 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Contacts/contact-simple-links-card.png) ## Overview Contact 02 is a marketing contact section component that displays a header with a title and subtitle, alongside informational cards for different contact channels (e.g., Chat to Sales, Chat to Support). Each card includes an icon, a title, a short description, and a clickable email link, providing users with multiple ways to get in touch. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Contact 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------- | | Responsive Layout (Page Width ≤ 768px) | Current Page Width is less than or equal to 768px | Content group row gap adjusts to 64px for stacked column layout on smaller screens | | Heading Font Size Reduction | Current Page Width is less than 768px | Main heading font size reduces from 48px to 36px | | Link Hover State | Email link is hovered and clickable | Underline appears on the email link text | | Link Disabled State | Email link is not clickable | Email link opacity reduces to 25% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Contact 03 Source: https://docs.brikl.co/components/marketing/contact-sections/contact-03 Centered contact section with header text, a multi-field form, and privacy policy checkbox. ![Contact 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Contacts/contact-simple-form.png) ## Overview Contact 03 is a marketing contact section component designed for web pages. It features a header area with a title, subtitle, and description, followed by a structured contact form including first name, last name, and other input fields, along with a privacy policy checkbox. It is responsive and adapts its layout for smaller screen widths. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Contact 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | Mobile/Narrow Layout | Page width is less than or equal to 768px | Content group adjusts row gap, form inputs expand to full width, and heading font size reduces to 36px | | Input Focused | User focuses on a text input field | Input field displays a soft box shadow to indicate active focus | | Input Invalid | Input field fails validation | Input border turns red and a red-tinted box shadow appears around the field | | Input Disabled | Input field is not clickable | Input field opacity reduces to 50% | | Privacy Policy Checkbox Toggled On | Checkbox is clicked when custom state 'terms\_' is false | Custom state 'terms\_' is set to true | | Privacy Policy Checkbox Toggled Off | Checkbox is clicked when custom state 'terms\_' is true | Custom state 'terms\_' is set to false | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Contact 04 Source: https://docs.brikl.co/components/marketing/contact-sections/contact-04 Centered contact form with header text, email input, and message textarea in a clean layout. ![Contact 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Contacts/contact-form-with-details.png) ## Overview Contact 04 is a marketing contact section component designed for web pages. It features a centered header with a title and subtitle, followed by a structured form containing an email input field and a multi-line message textarea. The component is intended to allow visitors to reach out by submitting their email and a message, making it suitable for landing pages or contact pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Contact 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------- | | Responsive layout (narrow screen) | Page width is less than or equal to 768px | Content group adjusts row gap to 64px and form max width is reset for smaller screens | | Heading font size reduction | Page width is less than 768px (mobile breakpoint) | Main heading font size reduces from 48px to 36px | | Email input focused | Email input is focused | Box shadow appears with color rgba(216,211,212,0.5) and spread of 3 | | Email input invalid | Email input value is not valid | Border color changes to red rgba(251,44,54,1) and red-tinted box shadow appears | | Email input disabled | Email input is not clickable | Opacity reduces to 50% | | Textarea focused | Message textarea is focused | Box shadow appears with color rgba(216,211,212,0.5) and spread of 3 | | Textarea invalid | Message textarea value is not valid | Border color changes to red rgba(251,44,54,1) and red-tinted box shadow appears | | Textarea disabled | Message textarea is not clickable | Opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Contact 05 Source: https://docs.brikl.co/components/marketing/contact-sections/contact-05 Two-column contact form with first name, last name inputs, labels, and responsive stacking layout. ![Contact 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Contacts/contact-form-with-aside-informations.png) ## Overview Contact 05 is a marketing contact section component featuring a structured form layout with First Name and Last Name input fields arranged side by side. It is designed for web pages where users can submit their contact information. The component includes responsive behavior that stacks fields vertically on smaller screens (768px and below), input validation states, focus styles, and mandatory field indicators marked with a red asterisk. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Contact 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | Input Focused | User focuses on First Name or Last Name input field | Input shows a soft colored box shadow (rgba(216,211,212,0.5)) with spread of 3 to indicate active focus | | Input Invalid | Input field fails validation (isnt\_valid condition) | Border turns red (rgba(251,44,54,1)) and a red-tinted box shadow appears around the input | | Input Disabled | Input is not clickable (isnt\_clickable condition) | Input opacity reduces to 50% to visually indicate a disabled state | | Responsive Stacked Layout | Page width is less than or equal to 768px | First Name and Last Name groups switch to 100% min-width, stacking vertically; content group row gap changes to 64px; form max-width is cleared | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Contact 06 Source: https://docs.brikl.co/components/marketing/contact-sections/contact-06 Centered contact section with header, email info card, chat support card, and icon details on light background. ![Contact 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Contacts/contact-form-with-informations.png) ## Overview Contact 06 is a marketing contact section component designed for web pages. It features a centered header with a title and subtitle, followed by informational cards displaying contact options such as email and chat support. Each card includes an icon, label, description, and a clickable link, providing users with clear ways to reach the team. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Contact 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------- | -------------------------------------------------- | ------------------------------------------------------------------------ | | Mobile Layout | Current Page Width is less than or equal to 768px | Content group reduces row gap to 64 and header font size shrinks to 36px | | Full-width Informations | Current Page Width is less than or equal to 1024px | Informations group expands to 100% minimum width | | Link Hover Underline | Email link is hovered and clickable | Underline appears on the email link text | | Link Disabled | Email link is not clickable | Email link opacity reduces to 25% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Faq 01 Source: https://docs.brikl.co/components/marketing/faqs/faq-01 Vertical FAQ list with bold questions and gray answers, separated by bottom borders. ![Faq 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Faq/faq-with-column-answers.png) ## Overview FAQ 01 is a static frequently asked questions component displaying a list of question-and-answer pairs in a clean vertical layout. Each question is shown in bold dark text with its corresponding answer in lighter gray text below, separated by a subtle bottom border. It is designed for marketing pages to help users quickly find answers to common questions. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Faq 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Faq 02 Source: https://docs.brikl.co/components/marketing/faqs/faq-02 Vertical accordion FAQ layout with expandable question rows, caret icons, and answer text. ![Faq 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Faq/faq-collapsible-questions.png) ## Overview FAQ 02 is a marketing component that displays a list of frequently asked questions in an accordion-style layout. Each question row can be clicked to toggle the visibility of its corresponding answer. The component uses custom states to track which item is currently open, allowing only one answer to be visible at a time while collapsing others. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Faq 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Accordion Item Open | User clicks a question trigger group | The answer group becomes visible and the caret icon switches from caret-down to caret-up | | Accordion Item Closed | User clicks the same question trigger group again | The answer group collapses and the caret icon reverts to caret-down | | Question Hover | User hovers over a question row | The question and icon group opacity reduces to 60% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - Trigger Question 01 (FAQ 02) is clicked | Sets the accordion\_item\_ custom state on the accordion group to the item number of Question 01, or resets it to 0 if it is already open (toggle behavior) | | GP - Trigger Question 04 (FAQ 02) is clicked | Sets the accordion\_item\_ custom state on the accordion group to the item number of Question 04, or resets it to 0 if it is already open (toggle behavior) | | GP - Trigger Question 05 (FAQ 02) is clicked | Sets the accordion\_item\_ custom state on the accordion group to the item number of Question 05, or resets it to 0 if it is already open (toggle behavior) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Faq 03 Source: https://docs.brikl.co/components/marketing/faqs/faq-03 Two-column FAQ layout with categorized accordion sections, headings, and toggle icons. ![Faq 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Faq/faq-collapsible-sections.png) ## Overview FAQ 03 is a marketing component that displays frequently asked questions organized into categories (e.g., General). Each question functions as an accordion item: clicking a question expands or collapses its answer. The component uses custom states to track which accordion item is open, toggling visibility of answer groups and swapping caret icons accordingly. It is designed for both web and mobile layouts with responsive font and alignment adjustments. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Faq 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | Accordion Item Open | User clicks a question group | The answer group becomes visible, the caret icon switches from caret-down to caret-up | | Accordion Item Closed | User clicks the same open question group again | The answer group collapses and hides, the caret icon reverts to caret-down | | Question Hover | User hovers over a question group | The question and icon group opacity reduces to 60% and question text becomes underlined | | Mobile Responsive | Current Page Width is less than or equal to 768px | Font size of the main heading reduces to 30px and alignment adjusts; category label width becomes 100% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | GP - General Question 01 (FAQ 03) is clicked | Sets the accordion\_item\_ custom state on the General Accordion group: if the current open item matches this question's item number, it resets to 0 (closed); otherwise it sets it to this question's item number (open) | | GP - General Question 05 (FAQ 03) is clicked | Sets the accordion\_item\_ custom state on the General Accordion group: if the current open item matches this question's item number, it resets to 0 (closed); otherwise it sets it to this question's item number (open) | | GP - General Question 04 (FAQ 03) is clicked | Sets the accordion\_item\_ custom state on the General Accordion group: if the current open item matches this question's item number, it resets to 0 (closed); otherwise it sets it to this question's item number (open) | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Faq 04 Source: https://docs.brikl.co/components/marketing/faqs/faq-04 Vertical FAQ list with bold questions and gray answer text, column layout, minimal style. ![Faq 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Faq/faq-with-footer.png) ## Overview FAQ 04 is a marketing component that displays a structured list of frequently asked questions with their answers. Each question-answer pair is stacked vertically in its own group, making it easy to scan and read. The component uses a clean, minimal design with bold question text and muted gray answer text, suitable for pricing pages, product pages, or support sections. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Faq 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Faq 05 Source: https://docs.brikl.co/components/marketing/faqs/faq-05 Vertical FAQ list with icon boxes, bold questions, and gray answer text in column layout. ![Faq 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Faq/faq-icons-centered.png) ## Overview Faq 05 is a marketing FAQ component that displays a vertical list of frequently asked questions, each paired with a styled icon box, a bold question title, and a descriptive answer in gray text. It is designed to provide clear, scannable information to users on both web and mobile platforms. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Faq 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Faq 06 Source: https://docs.brikl.co/components/marketing/faqs/faq-06 Vertical FAQ list with icon boxes, bold questions, and gray answer text on white background. ![Faq 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Faq/faq-with-aligned-icons.png) ## Overview FAQ 06 is a marketing component that displays a vertical list of frequently asked questions, each accompanied by a styled icon box, a bold question title, and a descriptive answer in gray text. It is designed to provide users with clear, scannable answers to common questions, suitable for pricing, onboarding, or support sections of a website or app. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Faq 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Features 01 Source: https://docs.brikl.co/components/marketing/features/features-01 Three-column feature grid with icons, titles, and descriptions in a centered card layout. ![Features 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Features/features-horizontal.png) ## Overview Features 01 is a marketing component designed to showcase product or service features in a structured grid layout. It displays multiple feature items, each containing an icon, a bold title, and a short descriptive text. The component is ideal for landing pages and marketing sections where highlighting key benefits or capabilities in a clean, scannable format is required. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Features 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | Mobile Layout | Current Page Width is less than or equal to 768px | Each feature item expands to 100% width, stacking vertically for a single-column mobile layout. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Features 02 Source: https://docs.brikl.co/components/marketing/features/features-02 Centered features grid with icon boxes, bold titles, and descriptive text in column layout. ![Features 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Features/features-horizontal-with-header.png) ## Overview Features 02 is a marketing component that showcases a list of product or service features. Each feature item includes an icon, a title, and a short description, arranged in a responsive column layout. It is designed to highlight key benefits or capabilities in a clean, structured format suitable for landing pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Features 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | Mobile Layout | Current Page Width is less than or equal to 768px | Each feature item expands to full width (min\_width\_css: 100%) to stack vertically on smaller screens. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Features 03 Source: https://docs.brikl.co/components/marketing/features/features-03 Two-column features section with icon header, title, description, and stacked feature list items. ![Features 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Features/features-with-aside-header.png) ## Overview Features 03 is a marketing component designed to showcase a product's key features in a structured layout. It includes an aside header section with an icon, headline, and supporting description, alongside a list of feature items each containing a title and descriptive text. It is ideal for landing pages to highlight product capabilities in a clean, readable format. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Features 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------- | --------------------------------------- | ------------------------------------------------------- | | Tablet/Mobile Layout | Page width less than or equal to 1024px | Aside header group switches to full width (100%) layout | | Mobile Header Font | Page width less than or equal to 768px | Headline font size reduces from 36px to 30px | | Mobile Feature Item 01 | Page width less than or equal to 768px | Feature item 01 expands to full width (100%) | | Mobile Feature Item 02 | Page width less than or equal to 768px | Feature item 02 expands to full width (100%) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Features 04 Source: https://docs.brikl.co/components/marketing/features/features-04 Vertical feature list with icon boxes, title, description text, and learn more buttons. ![Features 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Features/features-aligned-items.png) ## Overview Features 04 is a marketing component that displays a list of product or service features. Each feature item includes an icon in a styled wrapper box, a title, a short description, and a 'Learn more' button with an arrow icon. It is designed to communicate key benefits or capabilities in a clean, scannable layout suitable for landing pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Features 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | Mobile layout | Current Page Width is less than or equal to 768px | Feature items expand to 100% width and the content group adjusts row gap to 32px for stacked mobile display | | Learn More button hovered | Button is hovered | Font color changes to rgba(15,15,15,1) and underline is applied | | Learn More button not clickable | Button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Features 05 Source: https://docs.brikl.co/components/marketing/features/features-05 Vertical features section with icon header, two-column feature list, icons, titles, descriptions, and learn more links. ![Features 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Features/features-aside-with-grey-background.png) ## Overview Features 05 is a marketing component designed to showcase product features in a structured layout. It includes a header section with an icon, a bold headline, and a supporting subtitle, followed by a list of feature items. Each feature item contains an icon, a title, a description, and a 'Learn more' button with an arrow icon. The component is ideal for SaaS or product landing pages to highlight key capabilities in a clean, readable format. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Features 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------- | | Responsive Header Width | Current page width is less than or equal to 1024px | Header group switches to 100% minimum width for full-width stacking | | Responsive Headline Font Size | Current page width is less than or equal to 768px | Headline text font size reduces from 36 to 30px | | Responsive Feature Item Width | Current page width is less than or equal to 768px | Feature items expand to 100% minimum width for single-column stacking | | Learn More Button Hovered | User hovers over the Learn More button | Button text becomes underlined and font color changes to rgba(15,15,15,1) | | Learn More Button Not Clickable | Button is in a non-clickable state | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Features 06 Source: https://docs.brikl.co/components/marketing/features/features-06 Feature section with icon cards, titles, descriptions, and 'Learn more' CTAs in column layout. ![Features 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Features/features-aligned-items-with-grey-background.png) ## Overview Features 06 is a marketing component that showcases a list of product features with a header section containing a title and subtitle, followed by individual feature cards. Each card includes an icon, feature title, description text, and a 'Learn more' button with an arrow icon, designed to highlight key product capabilities in a clean, structured layout. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Features 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------- | | Mobile/Tablet Layout | Current Page Width less than or equal to 1024px | Header and feature item groups expand to 100% minimum width for full-width stacking | | Small Screen Title | Current Page Width less than or equal to 768px | Header title font size reduces from 36px to 30px | | Learn More Button Hover | Button is hovered | Underline appears and font color changes to rgba(15,15,15,1) | | Learn More Button Disabled | Button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Features 07 Source: https://docs.brikl.co/components/marketing/features/features-07 Two-column feature cards layout with icons, titles, and descriptions in centered alignment. ![Features 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Features/features-with-cta-buttons.png) ## Overview Features 07 is a marketing component designed to showcase product or service features in a grid of icon-based cards. Each card contains an icon, a bold title, and a short descriptive text, making it ideal for highlighting key capabilities or benefits on a landing page. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Features 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------- | | Mobile Layout | Current Page Width is less than or equal to 768px | Each feature item expands to 100% width, stacking cards vertically for mobile screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Footer 01 Source: https://docs.brikl.co/components/marketing/footers/footer-01 Multi-column footer with categorized navigation links, brand section, and responsive stacked mobile layout. ![Footer 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Footers/footer-simple-with-bottom.png) ## Overview Footer 01 is a marketing footer component designed for web and mobile applications. It provides a structured, multi-column layout with grouped navigation links organized by category (e.g., Features), allowing users to quickly navigate to key sections of the site. Each link includes hover states with underline and color transitions for an interactive feel. The component is responsive, adapting its layout and font sizes for mobile breakpoints. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Footer 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Link Hovered (Clickable) | User hovers over a link element that is clickable | Link text becomes underlined and font color changes to rgba(27,23,24,1) with a 200ms ease transition | | Link Disabled (Not Clickable) | Link element is set to not clickable | Link opacity reduces to 25%, visually dimming the element | | Mobile Breakpoint | Current page width is less than the built-in mobile breakpoint | Font size of section headers reduces from 16px to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Footer 02 Source: https://docs.brikl.co/components/marketing/footers/footer-02 Multi-column footer with logo, description, and categorized navigation links in clean layout. ![Footer 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Footers/footer-with-bottom-and-social-icons.png) ## Overview Footer 02 is a marketing footer component that displays a brand logo with a short description on the left, alongside organized columns of navigation links grouped by category (e.g., Products). It is designed for use at the bottom of marketing pages to provide structured site navigation and branding. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Footer 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Responsive Layout (Logo & Description) | Current page width is less than or equal to 1200px | The logo and description group expands to 100% width for smaller screens | | Link Hover | Link element is hovered and clickable | Link text becomes underlined and font color changes to rgba(27,23,24,1) with a 200ms ease transition | | Link Disabled | Link element is not clickable | Link opacity reduces to 25% | | Mobile Font Size | Current page width is less than the built-in mobile breakpoint | Section heading font size reduces from 16px to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Footer 03 Source: https://docs.brikl.co/components/marketing/footers/footer-03 Footer with logo, copyright text, newsletter signup input, and subscribe button in a horizontal layout. ![Footer 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Footers/footer-with-header-newsletter.png) ## Overview Footer 03 is a marketing footer component that combines a branding section (logo and copyright notice) with a newsletter subscription form. It includes an email input field and a subscribe button, designed to capture user emails. The component adapts responsively for both web and mobile viewports. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Footer 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------- | | Input Focused | User clicks or focuses on the email input field | A soft box shadow appears around the input to indicate active focus | | Input Invalid | User submits or leaves the input with an invalid email format | Input border turns red and a red-tinted box shadow is applied | | Input Disabled | Input is not clickable | Input opacity reduces to 50% indicating it is inactive | | Button Hovered | User hovers over the Subscribe button | Button opacity reduces to 90% for a subtle hover effect | | Button Disabled | Button is not clickable | Button opacity reduces to 50% indicating it is inactive | | Mobile Layout - Text | Current page width is less than the built-in mobile breakpoint | Text elements reduce font size to 14px for better mobile readability | | Mobile Layout - Subscribe Button | Current page width is 576px or less | Subscribe button expands to full width | | Mobile Layout - Newsletter Group | Current page width is 768px or less | Newsletter title and description group expands to full width | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Footer 04 Source: https://docs.brikl.co/components/marketing/footers/footer-04 Horizontal footer with newsletter title, description, email input, and subscribe button on light background. ![Footer 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Footers/footer-with-header-and-social-icons.png) ## Overview Footer 04 is a newsletter subscription footer component featuring a title, a short description, an email input field, and a subscribe button. It is designed to capture user emails for newsletter sign-ups, laid out in a clean horizontal row with a light gray background, suitable for the bottom of marketing pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Footer 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------- | | Input Focused | Email input is focused by the user | A soft shadow appears around the input field to indicate active focus | | Input Invalid | Email input contains an invalid email format | Input border turns red and a red-tinted shadow appears around the input | | Input Disabled | Input is not clickable | Input opacity reduces to 50% indicating it is disabled | | Button Hovered | User hovers over the Subscribe button | Button opacity reduces to 90% for a subtle hover effect | | Button Disabled | Button is not clickable | Button opacity reduces to 50% indicating it is disabled | | Button Full Width (Mobile) | Page width is 576px or less | Subscribe button stretches to full width | | Title & Description Stack (Tablet) | Page width is 768px or less | Title and description group width adjusts to 100% | | Smaller Font on Mobile | Page width is below the built-in mobile breakpoint | Title and description font sizes reduce to 14px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Footer 05 Source: https://docs.brikl.co/components/marketing/footers/footer-05 Horizontal footer with logo, description text, navigation links, and responsive mobile layout. ![Footer 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Footers/footer-with-store-buttons.png) ## Overview Footer 05 is a marketing footer component featuring a logo, a short brand description, and a set of navigation links (Products, Templates, Resources, Company). It is designed for use at the bottom of marketing pages and adapts its layout for mobile screens when the page width is 1200px or less. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Footer 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Mobile Layout | Current Page Width is less than or equal to 1200px | Logo, Description & Links group switches to 100% minimum width for stacked mobile layout | | Link Hover | User hovers over a clickable link | Underline appears on the hovered link with a 200ms ease transition on font color | | Link Disabled | Link is not clickable | Link opacity reduces to 25%, indicating a non-interactive state | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Footer 06 Source: https://docs.brikl.co/components/marketing/footers/footer-06 Horizontal footer with logo on left and navigation links aligned to the right. ![Footer 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Footers/footer-with-newsletter-input.png) ## Overview Footer 06 is a marketing footer component featuring a brand logo and a horizontal row of navigation links (Products, Templates, Resources, Company, Legal). It is designed for use at the bottom of marketing pages, providing quick access to key site sections with responsive behavior that adapts to smaller screen widths. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Footer 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | Mobile Layout | Page width is less than or equal to 1200px | The logo and links group expands to 100% minimum width, stacking or adjusting layout for smaller screens | | Link Hover | User hovers over a clickable navigation link | Underline appears on the hovered link with a 200ms ease transition | | Link Disabled | Link is not clickable | Link opacity reduces to 25%, visually indicating it is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Footer 07 Source: https://docs.brikl.co/components/marketing/footers/footer-07 Horizontal footer with logo, description text, and multiple navigation links in a row. ![Footer 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Footers/footer-with-header-cta.png) ## Overview Footer 07 is a marketing footer component featuring a logo image, a short brand description, and a set of horizontal navigation links (Products, Templates, Resources, Company). It is designed for the bottom of marketing pages and adapts responsively to smaller screen widths by adjusting layout constraints. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Footer 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Responsive Layout | Current page width is less than or equal to 1200px | Logo, Description & Links group switches to 100% minimum width for stacked mobile layout | | Link Hover | User hovers over a clickable navigation link | Underline appears on the hovered link with an ease transition on font color over 200ms | | Link Disabled | Link element is not clickable | Link opacity is reduced to 25%, visually indicating it is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Hero 01 Source: https://docs.brikl.co/components/marketing/heroes/hero-01 Centered hero section with headline, subtitle, CTA button, and avatar row with star ratings. ![Hero 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Heros/hero-with-cta-and-avatar-reviews-bis.png) ## Overview Hero 01 is a marketing hero component designed to introduce a product or service with a bold headline, descriptive subtitle, a primary call-to-action button, and a social proof row featuring overlapping user avatars and review indicators. It is suitable for landing pages and is responsive across web and mobile. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Hero 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------- | --------------------------------------------------- | ---------------------------------------------------------------- | | Mobile Typography | Current Page Width is less than or equal to 768px | Headline font size reduces from 60px to 36px for smaller screens | | Button Hovered | User hovers over the Discover All Components button | Button opacity decreases to 90% | | Button Disabled | Button is not clickable | Button opacity decreases to 50% | | Reviews Mobile Layout | Current Page Width is less than or equal to 768px | Reviews group adjusts min-width for smaller screen layout | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Hero 02 Source: https://docs.brikl.co/components/marketing/heroes/hero-02 Centered hero section with badge, headline, subtitle, and CTA buttons on clean background. ![Hero 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Heros/hero-with-group-badge.png) ## Overview Hero 02 is a marketing hero component designed to introduce a product or platform with a bold headline, descriptive subtitle, a styled badge announcement, and call-to-action buttons. It is intended as the primary above-the-fold section on a landing page, capturing user attention and driving conversions. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Hero 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------- | | Mobile Heading | Current Page Width is less than or equal to 768px | Headline font size reduces from 60 to 36 for better readability on small screens | | Badge Button Hovered | User hovers over the badge group button | Button opacity decreases to 80% | | Badge Button Not Clickable | Badge button is not clickable | Button opacity decreases to 50% | | Get Started Button Hovered | User hovers over the Get Started For Free button | Button opacity decreases to 90% | | Get Started Button Not Clickable | Get Started button is not clickable | Button opacity decreases to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Hero 03 Source: https://docs.brikl.co/components/marketing/heroes/hero-03 Centered hero section with badge, heading, subtext, dual CTA buttons, and press logo strip. ![Hero 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Heros/hero-with-logos.png) ## Overview Hero 03 is a marketing hero component designed to introduce a product or service with a prominent heading, descriptive subtext, a 'New Release' badge, and two call-to-action buttons ('Learn More' and 'Get Started'). It also includes a press mentions section with logos, making it ideal for landing pages that need to establish credibility and drive user action. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Hero 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------- | ------------------------------------------------- | -------------------------------------------------------------- | | Responsive Heading | Current Page Width is less than or equal to 768px | Heading font size reduces from 60px to 36px for mobile screens | | Learn More Button Hovered | User hovers over the Learn More button | Button background color changes to rgba(245, 244, 244, 1) | | Learn More Button Disabled | Learn More button is not clickable | Button opacity reduces to 50% | | Get Started Button Hovered | User hovers over the Get Started button | Button opacity reduces to 90% | | Get Started Button Disabled | Get Started button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Hero 04 Source: https://docs.brikl.co/components/marketing/heroes/hero-04 Centered hero section with logo, headline text, CTA button, and feature list in column layout. ![Hero 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Heros/hero-with-aligned-features.png) ## Overview Hero 04 is a marketing hero component designed to introduce a platform or service. It features a logo image, a bold headline, a call-to-action button labeled 'Start now for free', and a list of feature highlights with icons and descriptions. It is suited for landing pages aiming to communicate value propositions clearly. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Hero 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------- | ------------------------------------------------- | ---------------------------------------- | | Mobile Headline Size | Current page width is less than or equal to 768px | Headline font size reduces from 60 to 36 | | Mobile Feature Item Width | Current page width is less than or equal to 768px | Feature item min-width expands to 100% | | Button Hovered | CTA button is hovered | Button opacity reduces to 90% | | Button Disabled | CTA button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Hero 05 Source: https://docs.brikl.co/components/marketing/heroes/hero-05 Centered hero section with badge, heading, subtitle, and two CTA buttons side by side. ![Hero 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Heros/hero-with-image-right-bis.png) ## Overview Hero 05 is a marketing hero component designed to introduce a product or service with a prominent heading, descriptive subtitle, a small badge label, and two call-to-action buttons. It is suitable for landing pages and product showcases, providing a clean and modern layout that adapts responsively for both desktop and mobile viewports. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Hero 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | Tablet/Mobile layout | Current Page Width is less than or equal to 1024px | Header group switches to full width, text alignment changes to center, badge and CTA group align to center | | Small screen font size | Current Page Width is less than or equal to 768px | Heading font size reduces to 36px | | Button hover - View on Github | BT - View On Github button is hovered | Background color changes to rgba(245, 244, 244, 1) | | Button disabled - View on Github | BT - View On Github button is not clickable | Opacity reduces to 50% | | Button hover - Discover All Components | BT - Discover All Components button is hovered | Opacity reduces to 90% | | Button disabled - Discover All Components | BT - Discover All Components button is not clickable | Opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Hero 06 Source: https://docs.brikl.co/components/marketing/heroes/hero-06 Centered hero section with heading, subtext, two CTA buttons, and avatar social proof row. ![Hero 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Heros/hero-with-image-left-and-avatar-reviews-bis.png) ## Overview Hero 06 is a marketing hero component designed to introduce a product or service. It features a bold heading, a descriptive subtext paragraph, two call-to-action buttons (primary and secondary), and a social proof section with avatars and reviews. The layout is responsive, adapting alignment and font sizes for tablet and mobile viewports. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Hero 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | Tablet/Mobile Layout | Current Page Width is less than or equal to 1024px | Content group max-width set to 768px, text and CTA alignment switches to center, header group expands to full width | | Small Screen Font Reduction | Current Page Width is less than or equal to 768px | Heading font size reduces from 60px to 36px | | Button Hover - View on Github | Button is hovered | Background color changes to rgba(245, 244, 244, 1) with ease transition | | Button Hover - Discover All Components | Button is hovered | Button opacity reduces to 90% with ease transition | | Button Disabled | Button is not clickable | Button opacity reduces to 50% for both CTA buttons | | Avatars Row Alignment | Current Page Width is less than or equal to 1024px | Avatars and reviews group switches to centered horizontal alignment | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Hero 07 Source: https://docs.brikl.co/components/marketing/heroes/hero-07 Centered hero with headline, subtitle, dual CTA buttons, and a main thumbnail image below. ![Hero 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Heros/hero-with-full-image-bottom-bis.png) ## Overview Hero 07 is a full-width marketing hero section designed to capture user attention with a bold headline, descriptive subtitle, and two call-to-action buttons ('Get Started for Free' and 'Learn More'). Below the text content, a large thumbnail image visually supports the value proposition. The layout is responsive, stacking elements vertically on smaller screens. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Hero 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | -------------------------------------------------- | ------------------------------------------------------------ | | Mobile layout (content group) | Current Page Width is less than or equal to 1024px | Content group max-width is reduced to 768px | | Mobile headline font size | Current Page Width is less than or equal to 768px | Headline font size reduces from 60px to 36px | | Mobile thumbnail height | Current Page Width is less than or equal to 768px | Main thumbnail group min-height reduces to 400px | | Get Started button hovered | Button is hovered | Button opacity reduces to 90% | | Get Started button disabled | Button is not clickable | Button opacity reduces to 50% | | Learn More button hovered | Button is hovered | Background changes to rgba(245,244,244,1) with bgcolor style | | Learn More button disabled | Button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Hero 08 Source: https://docs.brikl.co/components/marketing/heroes/hero-08 Centered hero section with headline, subtitle, badge, and two CTA buttons in a clean layout. ![Hero 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Heros/hero-with-image-bordered-bis.png) ## Overview Hero 08 is a marketing hero component designed to serve as a prominent page introduction. It features a large centered headline, a descriptive subtitle, a 'NEW' badge with accompanying text, and two call-to-action buttons ('Discover All Components' and 'View on Github'). It is fully responsive and adapts its layout and font sizes for smaller screen widths. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Hero 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | -------------------------------------------------- | ---------------------------------------------------------- | | Mobile layout (content group) | Current Page Width is less than or equal to 1024px | Content group max-width is constrained to 768px | | Small screen headline | Current Page Width is less than or equal to 768px | Headline font size reduces from 60 to 36 | | CTA group alignment on tablet | Current Page Width is less than or equal to 1024px | CTA button group switches to centered horizontal alignment | | Primary button hovered | Discover All Components button is hovered | Button opacity reduces to 90 | | Primary button disabled | Discover All Components button is not clickable | Button opacity reduces to 50 | | Secondary button hovered | View on Github button is hovered | Button background color changes to rgba(245, 244, 244, 1) | | Secondary button disabled | View on Github button is not clickable | Button opacity reduces to 50 | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Integrations 01 Source: https://docs.brikl.co/components/marketing/integrations/integrations-01 Centered integration card with two logos, arrows icon, title, description, and feature checklist. ![Integrations 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Integrations/integrations-link-between-two-platform.png) ## Overview This component showcases a platform integration between Bubble.io and Brikl. It displays both brand logos connected by an arrows icon, a descriptive title and subtitle, and a list of integration features with checkmark icons. It is designed for marketing pages to highlight partnership or integration capabilities. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Integrations 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ------------------------------------------------- | ----------------------------------------------------------------------------- | | Mobile font size | Current Page Width is less than or equal to 768px | Title font size reduces from 24 to 18 for better readability on small screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Integrations 02 Source: https://docs.brikl.co/components/marketing/integrations/integrations-02 Grid layout showcasing integration cards with logos, names, and descriptions in a clean style. ![Integrations 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Integrations/integrations-simple-card-with-logo.png) ## Overview Integrations 02 is a marketing component that displays a collection of third-party integration cards (e.g., Google Sheets, Stripe) in a responsive grid. Each card features a logo, integration name, and short description, helping users visually understand available platform connections. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Integrations 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------- | | Mobile layout | Current Page Width is less than or equal to 1024px | Cards expand to full width and minimum height collapses to 0px for stacked mobile display | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Integrations 03 Source: https://docs.brikl.co/components/marketing/integrations/integrations-03 Grid layout of integration cards with logos, titles, descriptions, and connect buttons. ![Integrations 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Integrations/integrations-horizontal-card.png) ## Overview Integrations 03 is a marketing component that displays a list of third-party platform integrations (e.g., Google Sheets, Stripe) as cards. Each card contains a platform logo, title, short description, and a 'Connect' button, allowing users to visually browse and initiate connections to external services. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Integrations 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------------- | ------------------------------------------ | ----------------------------------------------------------------------- | | Button Hovered | User hovers over a Connect button | Button background color changes to rgba(245, 244, 244, 1) | | Button Disabled | Button is not clickable | Button opacity reduces to 50% | | Responsive Mobile Card | Page width is less than or equal to 1024px | Integration cards expand to 100% width and minimum height resets to 0px | | Responsive Mobile Logo Group | Page width is less than or equal to 768px | Logo and title group expands to 100% minimum width | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Integrations 04 Source: https://docs.brikl.co/components/marketing/integrations/integrations-04 Centered integrations section with header text and a grid of branded logo cards. ![Integrations 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Integrations/integrations-only-horizontal-logos.png) ## Overview Integrations 04 is a marketing component designed to showcase third-party tool integrations. It features a headline, a descriptive subtitle, and a responsive grid of logo cards (Google, Amazon, Bubble, and more), communicating platform compatibility and ecosystem breadth to potential users. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Integrations 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile layout | Current Page Width is less than or equal to 768px | Font size reduces (heading from 36px to 30px), logo wrapper minimum sizes shrink, row and column gaps decrease to 16px for tighter mobile spacing | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Integrations 05 Source: https://docs.brikl.co/components/marketing/integrations/integrations-05 Two-column integrations section with headline, description text, CTA buttons, and platform logo grid. ![Integrations 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Integrations/integrations-with-cta-and-logos.png) ## Overview Integrations 05 is a marketing component designed to showcase a product's integration ecosystem. It features a headline, descriptive text, and two call-to-action buttons ('Demo' and 'All Integrations') alongside a grid of platform/tool logos, encouraging users to explore available integrations. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Integrations 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------- | | Tablet/Mobile Layout | Page width less than or equal to 1024px | Content group adjusts row and column gaps to 48px and CTA group expands to full width | | Mobile Heading Size | Page width less than or equal to 768px | Heading font size reduces from 36px to 30px | | Mobile Logo Size | Page width less than or equal to 768px | Logo wrapper minimum dimensions reduce to 64px and logo image minimum width reduces to 32px | | Mobile List Gap | Page width less than or equal to 768px | Platform list row gap reduces to 16px | | All Integrations Button Hovered | Button is hovered | Button opacity reduces to 90% | | All Integrations Button Disabled | Button is not clickable | Button opacity reduces to 50% | | Demo Button Hovered | Button is hovered | Background color changes to rgba(245, 244, 244, 1) | | Demo Button Disabled | Button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Integrations 06 Source: https://docs.brikl.co/components/marketing/integrations/integrations-06 Centered integrations section with header text, platform logos, and view integration buttons in a grid layout. ![Integrations 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Integrations/integrations-with-buttons-link.png) ## Overview Integrations 06 is a marketing component designed to showcase available third-party integrations (e.g., Notion) within a product or landing page. It features a headline, a descriptive subtitle, and a list of integration cards, each containing a logo, title, description, and a call-to-action button. The component helps communicate the breadth of tool compatibility to potential users. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Integrations 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile layout | Current Page Width is less than or equal to 768px | Font size reduces (e.g., heading from 36 to 30px), row and column gaps decrease, and minimum widths adjust for logo wrappers and title groups to fit smaller screens. | | Button hovered | View integration button is hovered | Button text becomes underlined and font color changes to rgba(15,15,15,1). | | Button not clickable | View integration button is not clickable | Button opacity reduces to 50%. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Integrations 07 Source: https://docs.brikl.co/components/marketing/integrations/integrations-07 Grid-based integrations showcase with logos, titles, and descriptions on light card backgrounds. ![Integrations 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Integrations/integrations-with-grey-background.png) ## Overview Integrations 07 is a marketing component that displays a list of third-party tool integrations (such as Notion and Stripe) in a responsive card grid layout. Each card features a logo, integration title, and short description, helping users understand the available app connections. It is designed for landing pages or product pages to highlight platform compatibility and encourage tool adoption. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Integrations 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile layout | Current Page Width is less than or equal to 768px | Font size of the headline reduces from 36 to 30, row and column gaps adjust, logo wrapper minimum dimensions shrink, and card minimum widths adapt for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Integrations 08 Source: https://docs.brikl.co/components/marketing/integrations/integrations-08 Integrations page with categorized platform cards featuring logos, titles, descriptions, and toggle switches. ![Integrations 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Integrations/integrations-with-toggle.png) ## Overview This component displays a Sales & Marketing Tools integrations section where users can view and manage connections to various platforms (e.g., Google). Each integration card shows a logo, name, description, and a toggle switch that allows users to connect or disconnect the integration. The component uses custom states to track each integration's connection status and supports conditional visibility based on a category filter. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Integrations 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | | Connected | User clicks the toggle switch when integration is in Disconnected state | The integration card updates to show a Connected status, toggling the switch appearance | | Disconnected | User clicks the toggle switch when integration is in Connected state | The integration card updates to show a Disconnected status, toggling the switch appearance | | Filtered/Hidden | A category filter element (radio) is set to a value that does not match the card's category | The integration card becomes hidden/invisible | | Mobile Layout | Page width is less than or equal to 1024px or 768px | Card and group widths expand to 100% for responsive mobile layout | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | Switch (Google) clicked when custom state item\_ equals Disconnected | Sets custom state item\_ on Google group element to Connected | | Switch (Google) clicked when custom state item\_ equals Connected | Sets custom state item\_ on Google group element to Disconnected | | Switch (second integration) clicked when custom state item\_ equals Disconnected | Sets custom state item\_ on second integration group element to Connected | | Switch (second integration) clicked when custom state item\_ equals Connected | Sets custom state item\_ on second integration group element to Disconnected | | Switch (third integration) clicked when custom state item\_ equals Disconnected | Sets custom state item\_ on third integration group element to Connected | | Switch (third integration) clicked when custom state item\_ equals Connected | Sets custom state item\_ on third integration group element to Disconnected | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Logos 01 Source: https://docs.brikl.co/components/marketing/logos/logos-01 Centered logos section with headline text and a horizontal row of five brand logo images. ![Logos 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Logos/logos-simple-horizontal.png) ## Overview Logos 01 is a marketing component designed to display press mentions or partner brand logos. It features a centered headline text followed by a horizontal row of five SVG logo images, commonly used to build credibility and social proof on landing pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Logos 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | Mobile Logo Size | Current Page Width is less than or equal to 768px | Each logo image switches to a smaller minimum width and height (110px min-width, 36px min-height) to adapt to smaller screens. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Logos 02 Source: https://docs.brikl.co/components/marketing/logos/logos-02 Centered logo showcase with headline text and two rows of company logos in a horizontal layout. ![Logos 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Logos/logos-duo-horizontal.png) ## Overview Logos 02 is a marketing component designed to display social proof by showcasing logos of well-known companies. It features a headline text ('Join 4,000+ companies already growing') followed by two horizontal rows of company logos (Mailchimp, Intercom, Feedly, Unsplash, Pinterest, Adobe, Monday), helping build trust and credibility with potential users or customers. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Logos 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | Mobile/Narrow Layout | Current Page Width is less than or equal to 768px | Logo images and container group switch to reduced minimum widths (110px) and minimum heights (36px) to adapt to smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Logos 03 Source: https://docs.brikl.co/components/marketing/logos/logos-03 Centered logo grid on grey rounded card with headline text, displaying five brand logos in a row. ![Logos 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Logos/logos-horizontal-with-grey-background.png) ## Overview Logos 03 is a press/social proof marketing component that displays a collection of five brand logos (Intercom, Mailchimp, Feedly, Unsplash, Pinterest) arranged horizontally inside a grey rounded container, accompanied by a headline such as 'We've been mentioned in the press'. It is used to build credibility and trust on landing pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Logos 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile layout | Current Page Width is less than or equal to 768px | Horizontal padding is removed from the content group, border roundness is set to 0 on the background card, and logo images switch to smaller minimum dimensions (110x36px) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Logos 04 Source: https://docs.brikl.co/components/marketing/logos/logos-04 Two-row grid of logo cards with centered heading text on light gray background. ![Logos 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Logos/logos-with-grey-cards.png) ## Overview Logos 04 is a social proof marketing component that displays a collection of company logos in a structured two-row grid layout. It features a centered headline ('Join 4,000+ companies already growing') above two rows of logo cards, each styled with a light gray rounded background. The component is designed to build trust and credibility by showcasing recognizable brand logos such as Mailchimp, Intercom, Unsplash, Feedly, and HubSpot. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Logos 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------- | | Mobile/Narrow Layout | Page width is less than or equal to 768px | Applies a minimum width CSS of 110px to the outer group, adjusting layout for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Navbar 01 Source: https://docs.brikl.co/components/marketing/navbars/navbar-01 Horizontal navbar with logo, navigation menu links, and responsive visibility control. ![Navbar 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Navbars/navbar-simple.png) ## Overview Navbar 01 is a marketing navigation bar component designed for web pages. It includes a logo image on the left and a row of navigation buttons (Home, Features, Pricing, About) that automatically hide on screens 768px wide or smaller, making it suitable for desktop-first responsive layouts. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Navbar 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | Menu Hidden on Mobile | Current Page Width is less than or equal to 768px | The menus group (GP - Menus) becomes invisible, hiding all navigation links on small screens | | Button Hovered | User hovers over any navigation button (Home, Features, Pricing, About) | Button background changes to rgba(245,244,244,1) giving a light grey hover highlight | | Button Not Clickable | Button is in a non-clickable state | Button opacity reduces to 50%, visually indicating it is disabled | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Navbar 02 Source: https://docs.brikl.co/components/marketing/navbars/navbar-02 Horizontal navbar with logo on left, centered nav links, and action buttons on right. ![Navbar 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Navbars/navbar-menus-border-bottom.png) ## Overview Navbar 02 is a responsive marketing navigation bar component designed for web applications. It includes a logo group on the left, navigation menu links (Home, Features, Pricing, About) in the center, and is built to collapse or adapt based on page width. It is ideal for landing pages and marketing sites requiring a clean, professional top navigation. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Navbar 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Menu Hidden (Mobile/Narrow) | Current Page Width is less than or equal to 768px | The GP - Menus group becomes hidden, collapsing the navigation links for smaller screens | | Button Hovered | User hovers over any nav button (Home, Features, Pricing, About) | Button background changes to rgba(245,244,244,1) giving a subtle highlight effect | | Button Disabled | Button is not clickable | Button opacity reduces to 50%, visually indicating it is inactive | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Navbar 03 Source: https://docs.brikl.co/components/marketing/navbars/navbar-03 Horizontal navbar with logo, navigation menu buttons, and a search input bar. ![Navbar 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Navbars/navbar-cart.png) ## Overview Navbar 03 is a marketing-oriented navigation bar component designed for web applications. It includes a logo image on the left, a set of menu buttons (Products, Categories, Deals) in the center, and a search input field. The component is responsive, hiding the menu group on screens 768px wide or less, making it suitable for desktop-first layouts. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Navbar 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | Menu Hidden on Small Screens | Page width is less than or equal to 768px | The menus group (Products, Categories, Deals) becomes hidden | | Button Hovered | User hovers over any navigation button (Products, Categories, Deals) | Button background changes to a light gray color (rgba(245,244,244,1)) | | Button Disabled | Button is not clickable | Button opacity reduces to 50% | | Search Input Focused | User focuses on the search input field | A box shadow appears around the search input container | | Search Input Invalid | Search input fails validation | Border turns red and a red-tinted box shadow appears around the input container | | Search Input Disabled | Search input is not clickable | Search input container opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Navbar 04 Source: https://docs.brikl.co/components/marketing/navbars/navbar-04 Horizontal navbar with logo on left, centered nav links, and responsive mobile behavior. ![Navbar 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Navbars/navbar-with-icons.png) ## Overview Navbar 04 is a marketing navigation bar component featuring a logo on the left side and a set of navigation menu buttons (Home, Features, Pricing, About). It is designed for web pages and automatically hides the menu items on screens 768px wide or less, making it responsive. The component uses hover and clickability states for interactive button feedback. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Navbar 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | | Menu Hidden (Mobile) | Current Page Width is less than or equal to 768px | The GP - Menus group becomes invisible, collapsing the navigation links on smaller screens | | Button Hovered | User hovers over any nav button (Home, Features, Pricing, About) | Button background changes to rgba(245,244,244,1) with ease transition over 200ms | | Button Not Clickable | Button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Navbar 05 Source: https://docs.brikl.co/components/marketing/navbars/navbar-05 Horizontal navbar with logo, search input, notification bell, account avatar, and hamburger menu. ![Navbar 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Navbars/navbar-two-stage.png) ## Overview Navbar 05 is a marketing navigation bar component designed for web applications. It includes a logo group, a search input field with focus and validation states, icon buttons for notifications and account access, and a hamburger menu button that appears on smaller screens. The component adapts its layout based on page width, hiding or showing elements responsively. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Navbar 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------- | | Mobile Menu Button Visible | Current Page Width is less than or equal to 768px | Hamburger menu button becomes visible and search bar border style changes to none | | Button Hovered (Trigger Menus) | Mouse hover on hamburger menu button | Button background color changes to rgba(245, 244, 244, 1) | | Button Not Clickable (Trigger Menus) | Button is not clickable | Button opacity reduces to 50% | | Button Hovered (Trigger Notifications) | Mouse hover on notification bell button | Button background color changes to rgba(245, 244, 244, 1) with bgcolor style | | Button Not Clickable (Trigger Notifications) | Button is not clickable | Button opacity reduces to 50% | | Search Input Focused | Search input field gains focus | Input group gets a box shadow with color rgba(216,211,212,0.5) and spread of 3 | | Search Input Invalid | Search input value is not valid | Input group border turns red rgba(251,44,54,1) with red box shadow | | Search Input Not Clickable | Search input is not clickable | Input group opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Navbar 06 Source: https://docs.brikl.co/components/marketing/navbars/navbar-06 Horizontal navbar with logo, dropdown menu links, and responsive visibility toggle for desktop. ![Navbar 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Navbars/navbar-with-chevrons.png) ## Overview Navbar 06 is a marketing navigation bar component designed for web applications. It features a logo area alongside a horizontal menu with multiple navigation links (Home, Features, Pricing, About), some of which include dropdown indicators (caret icons). The navbar includes hover states, dropdown expand/collapse states, and automatically hides the menu on screens 768px wide or less, making it suitable for desktop-first responsive layouts. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Navbar 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------ | ----------------------------------------- | --------------------------------------------------------------------- | | Menu hidden on mobile | Page width is less than or equal to 768px | The entire menus group becomes hidden | | Button hover | User hovers over a nav button | Button background changes to rgba(245,244,244,1) with ease transition | | Button disabled | Button is not clickable | Button opacity reduces to 50% | | Dropdown open (Features) | Features dropdown group is visible | Caret icon switches from caret-down to caret-up | | Dropdown open (Pricing) | Pricing dropdown group is visible | Caret icon switches from caret-down to caret-up | | Dropdown open (About) | About dropdown group is visible | Caret icon switches from caret-down to caret-up | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Navbar 07 Source: https://docs.brikl.co/components/marketing/navbars/navbar-07 Horizontal navbar with logo, navigation menu links, login and signup buttons, and mobile hamburger trigger. ![Navbar 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Navbars/navbar-login-and-signup.png) ## Overview Navbar 07 is a responsive marketing navigation bar component that includes a logo area, desktop navigation menu links, login and signup call-to-action buttons, and a hamburger/trigger button for mobile views. It adapts its layout based on page width, hiding desktop elements on screens 768px or narrower and showing a mobile menu trigger instead. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Navbar 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------ | ------------------------------------- | ----------------------------------------------------------------------- | | Signup Button Hovered | User hovers over the Signup button | Signup button opacity reduces to 90% | | Signup Button Disabled | Signup button is not clickable | Signup button opacity reduces to 50% | | Signup Button Hidden on Mobile | Page width is 768px or less | Signup button becomes hidden | | Login Button Hovered | User hovers over the Login button | Login button background changes to rgba(245, 244, 244, 1) | | Login Button Disabled | Login button is not clickable | Login button opacity reduces to 50% | | Login Button Hidden on Mobile | Page width is 768px or less | Login button becomes hidden | | Mobile Menu Trigger Visible | Page width is 768px or less | Hamburger/trigger button becomes visible | | Mobile Menu Trigger Hovered | User hovers over the trigger button | Trigger button background changes to rgba(245, 244, 244, 1) | | Desktop Menus Hidden on Mobile | Page width is 768px or less | Navigation menu group becomes hidden | | Home Button Hovered | User hovers over the Home menu button | Background changes to rgba(245, 244, 244, 1) with bgcolor style applied | | Home Button Disabled | Home button is not clickable | Home button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Navbar 08 Source: https://docs.brikl.co/components/marketing/navbars/navbar-08 Horizontal navbar with logo, navigation menu buttons, login/signup buttons, and mobile hamburger trigger. ![Navbar 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Navbars/navbar-centered.png) ## Overview Navbar 08 is a responsive marketing navigation bar component featuring a logo area, horizontal menu links, and authentication buttons (Login and Signup). On mobile screens (width ≤ 768px), the desktop menu and auth buttons collapse and a hamburger/list icon button appears to trigger mobile navigation. It is designed for landing pages and marketing sites requiring a clean, professional top navigation. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Navbar 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------ | ------------------------------------------------- | ----------------------------------------------------------------------- | | Hovered - Login Button | User hovers over the Login button | Login button background changes to rgba(245, 244, 244, 1) | | Hovered - Signup Button | User hovers over the Signup button | Signup button opacity reduces to 90% | | Hovered - Trigger Menus Button | User hovers over the hamburger menu button | Button background changes to rgba(245, 244, 244, 1) | | Disabled - Login Button | Login button is not clickable | Login button opacity reduces to 50% | | Disabled - Signup Button | Signup button is not clickable | Signup button opacity reduces to 50% | | Mobile - Login Hidden | Current Page Width is less than or equal to 768px | Login button is hidden and collapsed | | Mobile - Signup Hidden | Current Page Width is less than or equal to 768px | Signup button is hidden and collapsed | | Mobile - Hamburger Visible | Current Page Width is less than or equal to 768px | Hamburger/list trigger button becomes visible | | Mobile - Desktop Menu Hidden | Current Page Width is less than or equal to 768px | Desktop navigation menu group is hidden | | Hovered - Home Menu Button | User hovers over the Home navigation button | Background changes to rgba(245, 244, 244, 1) with bgcolor style applied | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ✅ | ## License This component requires a **Starter** plan. # Pricing 01 Source: https://docs.brikl.co/components/marketing/pricing-sections/pricing-01 Centered pricing section with header, single pricing card, price display, and feature list. ![Pricing 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Pricings/pricing-single-price.png) ## Overview Pricing 01 is a marketing component designed to present a single pricing plan. It includes a header section with a title and subtitle, a styled pricing card showing the starting price, billing frequency, a free trial note, a call-to-action button, and a list of included features. It is ideal for SaaS or subscription-based product landing pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Pricing 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | ------------------------------------------ | ---------------------------------------------------------- | | Button Hovered | User hovers over the 'TRY FOR FREE' button | Button opacity reduces to 90% | | Button Disabled | Button is not clickable | Button opacity reduces to 50% | | Mobile Layout | Page width is less than or equal to 768px | Features wrapper switches to centered horizontal alignment | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Pricing 02 Source: https://docs.brikl.co/components/marketing/pricing-sections/pricing-02 Pricing card with badge, plan name, price, separator, and features section in a structured layout. ![Pricing 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Pricings/pricing-single-price-horizontal.png) ## Overview Pricing 02 is a marketing pricing section component designed to showcase a single pricing plan. It includes a badge highlighting a discount, the plan name, a headline description, a price display, a separator, and a features and CTA section. It is suitable for landing pages and SaaS product pages to present pricing options clearly and attractively. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Pricing 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------- | | Mobile view - Plan name | Current Page Width is less than or equal to 768px | Plan name font size reduces from 24px to 20px | | Mobile view - Headline text | Current Page Width is less than or equal to 768px | Headline font size reduces from 28px to 24px and min-width becomes 100% | | Mobile view - Price | Current Page Width is less than or equal to 768px | Price font size reduces from 36px to 30px and alignment changes to left | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Pricing 03 Source: https://docs.brikl.co/components/marketing/pricing-sections/pricing-03 Pricing section with header, description, and feature cards displaying icons, titles, and descriptions. ![Pricing 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Pricings/pricing-section-featured-cards.png) ## Overview Pricing 03 is a marketing pricing section component designed to showcase product features or plan highlights. It includes a header with a title and subtitle, followed by a set of featured cards, each containing an icon, a title, and a descriptive text. The layout is clean and structured for presenting value propositions or plan features in a transparent pricing context. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Pricing 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | Narrow Wrapper Layout | Current Page Width is less than or equal to 1200px | The wrapper group max width is constrained to 650px for better readability on smaller screens. | | Featured Cards Full Width | Current Page Width is less than or equal to 1200px | The featured cards container stretches to 100% width to fill the available space. | | Card Title Font Size Increase | Current Page Width is less than or equal to 768px | The featured card title font size increases to 20px for improved mobile readability. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Pricing 04 Source: https://docs.brikl.co/components/marketing/pricing-sections/pricing-04 Centered pricing section with toggle billing switch and pricing cards in a clean layout. ![Pricing 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Pricings/pricing-dual-column.png) ## Overview Pricing 04 is a marketing pricing section component featuring a heading, subtitle, a monthly/yearly billing toggle switch, and pricing cards. It allows users to switch between billing periods, dynamically updating the displayed pricing. The toggle uses a custom state to track whether yearly billing is active, and the layout is designed for both web and mobile views. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Pricing 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | Yearly Billing Active | User clicks the billing toggle switch when it is currently set to monthly (active\_ is false) | The toggle switch background changes to dark, the toggle knob slides to the right (flex-end alignment), indicating yearly billing is selected | | Monthly Billing Active | User clicks the billing toggle switch when it is currently set to yearly (active\_ is true) | The toggle switch reverts to its default state with the knob on the left (flex-start alignment), indicating monthly billing is selected | | Button Hovered | User hovers over the Purchase button | The Purchase button opacity reduces to 90% | | Button Not Clickable | The Purchase button is not clickable | The Purchase button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | Switch - Billing (Pricing 04) is clicked (when active\_ is true) | Sets the custom state 'active\_' on the billing switch element to false, switching billing back to monthly | | Switch - Billing (Pricing 04) is clicked (when active\_ is false) | Sets the custom state 'active\_' on the billing switch element to true, switching billing to yearly | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Pricing 05 Source: https://docs.brikl.co/components/marketing/pricing-sections/pricing-05 Two-column pricing cards with toggle billing switch, feature lists, and CTA buttons. ![Pricing 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Pricings/pricing-with-billing-cycle-toggle.png) ## Overview Pricing 05 is a marketing pricing section component featuring multiple pricing cards (including a Pro Plan) with a billing toggle that switches between monthly and yearly pricing. It displays plan names, prices, descriptions, feature lists with check icons, and call-to-action buttons. The toggle uses a custom state to dynamically update displayed prices and billing period labels. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Pricing 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | | Monthly Billing | Toggle billing button clicked when yearly is active (custom.radio\_item\_ is true) | Price reverts to monthly value (e.g. \$39) and billing label shows 'per month' | | Yearly Billing | Toggle billing button clicked when monthly is active (custom.radio\_item\_ is false) | Price updates to yearly value (e.g. \$390) and billing label shows 'per year' | | Button Hovered | CTA button is hovered | Button opacity reduces to 90% | | Button Disabled | CTA button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | GP - Toggle Billing button clicked (when custom.radio\_item\_ is false) | Sets custom state 'custom.radio\_item\_' on element bTZRv to true, switching to yearly billing view | | GP - Toggle Billing button clicked (when custom.radio\_item\_ is true) | Sets custom state 'custom.radio\_item\_' on element bTZRv to false, switching back to monthly billing view | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Pricing 06 Source: https://docs.brikl.co/components/marketing/pricing-sections/pricing-06 Three-column pricing cards layout with icons, plan names, prices, and feature lists. ![Pricing 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Pricings/pricing-simple-triple-price.png) ## Overview Pricing 06 is a marketing pricing section component designed to showcase multiple subscription plans side by side. It includes a header with a title and subtitle, followed by plan cards (e.g., Basic Plan) each containing an icon, plan name, price, billing frequency, and a list of features with check icons. It helps users compare plans and make purchasing decisions. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Pricing 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Pricing 07 Source: https://docs.brikl.co/components/marketing/pricing-sections/pricing-07 Centered pricing section with header, badge, price display, and two CTA buttons. ![Pricing 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Pricings/pricing-with-multiple-cta.png) ## Overview Pricing 07 is a marketing pricing section component designed to showcase a single pricing plan (Basic Plan) with a header, price display, plan badge, and two call-to-action buttons ('Get started' and 'Chat to sales'). It is intended to be embedded in landing pages or marketing sites to drive user conversions. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Pricing 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------- | ------------------------------------------- | -------------------------------------------------- | | Get Started Button Hovered | User hovers over the 'Get started' button | Button opacity reduces to 90% | | Get Started Button Disabled | Button is not clickable | Button opacity reduces to 50% | | Chat to Sales Button Hovered | User hovers over the 'Chat to sales' button | Background color changes to rgba(245, 244, 244, 1) | | Chat to Sales Button Disabled | Button is not clickable | Button opacity reduces to 50% | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Pricing 08 Source: https://docs.brikl.co/components/marketing/pricing-sections/pricing-08 Multi-card pricing section with toggle billing, feature lists, icons, and plan headers. ![Pricing 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Pricings/pricing-with-top-banner.png) ## Overview Pricing 08 is a marketing pricing section component that displays subscription plan cards (e.g., Basic Plan) with pricing, title, description, and feature lists with check icons. It includes a billing toggle that switches between monthly and yearly pricing using a custom state, making it ideal for SaaS or product landing pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Pricing 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | | Monthly Billing | Toggle Billing element is clicked when custom state radio\_item\_ is true | Sets custom state radio\_item\_ to false, displaying monthly pricing (e.g., \$15/mo) | | Yearly Billing | Toggle Billing element is clicked when custom state radio\_item\_ is false | Sets custom state radio\_item\_ to true, displaying yearly pricing (e.g., \$150/yr) | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Workflows This component includes pre-built workflows. | Trigger | Action | | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | GP - Toggle Billing button clicked (when radio\_item\_ is false) | Sets custom state radio\_item\_ on element bTaCH to true, switching to yearly billing display | | GP - Toggle Billing button clicked (when radio\_item\_ is true) | Sets custom state radio\_item\_ on element bTaCH to false, switching to monthly billing display | These workflows are included when you use the **Copy with Workflows** option in the Brikl panel. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Team 01 Source: https://docs.brikl.co/components/marketing/teams/team-01 Centered team section with header text and a grid of avatar cards showing name and role. ![Team 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Teams/team-avatar-circle-bis-02.png) ## Overview Team 01 is a marketing component designed to showcase company team members. It features a header section with a tag line, title, and descriptive text, followed by a list of team member cards, each containing a circular avatar image, name, and job title. It is ideal for 'About Us' or 'Meet the Team' sections on a marketing website. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Team 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | Mobile Title Font Size | Current Page Width is less than 768px | The 'Meet our team' heading font size reduces from 48px to 36px for better readability on smaller screens. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | ------------ | | License | Free | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Team 02 Source: https://docs.brikl.co/components/marketing/teams/team-02 Responsive team section with header, title, description, and two CTA buttons in a row layout. ![Team 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Teams/team-image-card-avatar-bis-02.png) ## Overview Team 02 is a marketing component designed to showcase a company's team section. It includes a header group with a title ('Our team'), a headline ('Some of the people you'll be working with'), a supporting description, and two call-to-action buttons ('About us' and 'Open positions'). It is intended for landing pages or company websites to introduce the team and drive user engagement. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Team 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ----------------------------------------- | ----------------------------------------- | --------------------------------------------------------- | | Mobile layout - Content Group | Page width is less than or equal to 768px | Row gap of the content group changes to 64 | | Mobile layout - CTA Group | Page width is less than or equal to 768px | CTA group minimum width expands to 100% | | Mobile layout - About Us Button | Page width is less than or equal to 768px | About Us button minimum width expands to 100% | | Hover - About Us Button | Button is hovered | Background color changes to rgba(245, 244, 244, 1) | | Disabled - About Us Button | Button is not clickable | Button opacity reduces to 50% | | Mobile layout - Open Positions Button | Page width is less than or equal to 768px | Open Positions button minimum width expands to 100% | | Hover - Open Positions Button | Button is hovered | Button opacity reduces to 90% | | Disabled - Open Positions Button | Button is not clickable | Button opacity reduces to 50% | | Mobile layout - Title & Description Group | Page width is less than or equal to 768px | Title and description group minimum width expands to 100% | | Small screen - Headline font size | Page width is less than 768px | Headline font size reduces from 36px to 30px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Team 03 Source: https://docs.brikl.co/components/marketing/teams/team-03 Grid-based team section with avatar images, names, roles, bios, and social icons. ![Team 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Teams/team-image-card-avatar-with-socials-bis-02.png) ## Overview Team 03 is a marketing component designed to showcase team members in a structured grid layout. Each card displays a member's avatar image, name, job title, short bio, and social media icons (LinkedIn, Facebook, Twitter/X). It is intended for landing pages or company websites to introduce team members in a visually clean and professional format. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Team 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | Mobile/Tablet Layout | Current Page Width is less than or equal to 768px | Reduces row gap to 64px in the content group for tighter vertical spacing on smaller screens | | Avatar Full Width | Current Page Width is less than or equal to 1024px | Avatar image group expands to 100% minimum width to fill its container | | Social Icon Hover | User hovers over a social media icon (LinkedIn, Facebook, Twitter/X) | Icon color transitions from rgba(164,167,174,1) to rgba(113,118,128,1) with 200ms ease animation | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Team 04 Source: https://docs.brikl.co/components/marketing/teams/team-04 Centered team section with header, tagline, description text, and two CTA buttons in a column layout. ![Team 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Teams/team-image-card-avatar-with-description-bis-02.png) ## Overview Team 04 is a marketing component designed to introduce a company's team section on a webpage. It features a structured header area with a section label ('Our team'), a main heading ('Meet our team'), a descriptive paragraph about the team's philosophy, and two call-to-action buttons ('About us' and 'Open positions'). The layout is clean and centered, suitable for landing pages or company profile pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Team 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | Mobile Layout | Page width is less than or equal to 768px | Content group adjusts row gap to 64px, CTA group and buttons expand to 100% min-width for full-width stacking | | About Us Button Hovered | User hovers over the 'About us' button | Button background color changes to rgba(245, 244, 244, 1) | | About Us Button Disabled | 'About us' button is not clickable | Button opacity reduces to 50% | | Open Positions Button Hovered | User hovers over the 'Open positions' button | Button opacity reduces to 90% | | Open Positions Button Disabled | 'Open positions' button is not clickable | Button opacity reduces to 50% | | Heading Font Size Small | Page width is less than 768px | Main heading font size reduces from 36px to 30px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Team 05 Source: https://docs.brikl.co/components/marketing/teams/team-05 Grid-based team section with avatar images, names, roles, bios, and social icons. ![Team 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Teams/team-circle-avatar-with-description-and-socials-bis-02.png) ## Overview Team 05 is a marketing component designed to showcase team members in a structured card layout. Each card displays a circular avatar image, the member's name, job title, a short bio, and social media icons (LinkedIn, Facebook, Twitter/X) with hover color transitions. The component is responsive, adjusting its layout for screens 768px wide or smaller. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Team 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | -------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | Mobile/Narrow Layout | Current Page Width is less than or equal to 768px | Row gap between content elements is reduced to 64px, adapting layout for smaller screens | | Social Icon Hover | User hovers over a social media icon (Facebook, LinkedIn, or Twitter/X) | Icon color changes from rgba(164,167,174,1) to rgba(113,118,128,1) with a 200ms ease transition | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Team 06 Source: https://docs.brikl.co/components/marketing/teams/team-06 Centered team section with header, description text, and two CTA buttons in a column layout. ![Team 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Teams/team-card-with-gray-background-bis-02.png) ## Overview Team 06 is a marketing component designed to showcase a company's team section. It features a centered header with a label, title, and description text, accompanied by two call-to-action buttons ('About us' and 'Open positions'). The component is fully responsive, adapting its layout for smaller screen widths below 768px. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Team 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------ | | Mobile Layout | Page width less than or equal to 768px | Buttons and container groups expand to full width (100%) and row gap adjusts to 64px | | About Us Button Hover | Mouse hover over the 'About us' button | Button background color changes to rgba(245, 244, 244, 1) | | About Us Button Disabled | Button is not clickable | Button opacity reduces to 50% | | Open Positions Button Hover | Mouse hover over the 'Open positions' button | Button opacity reduces to 90% | | Open Positions Button Disabled | Button is not clickable | Button opacity reduces to 50% | | Heading Font Size Mobile | Page width less than 768px | Main heading font size reduces from 36px to 30px | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Testimonial 01 Source: https://docs.brikl.co/components/marketing/testimonials/testimonial-01 Centered testimonial section with logo, quote text, avatar image, and name/role details. ![Testimonial 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Testimonials/testimonials-solo-review-bis.png) ## Overview Testimonial 01 is a marketing component designed to showcase a single customer testimonial. It displays a company logo, a prominent quote, and the reviewer's avatar along with their name and role. It is ideal for landing pages to build trust and social proof. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Testimonial 01** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ----------------------------------------- | ------------------------------------------------------------------------------------ | | Mobile font size | Page width is less than or equal to 768px | Quote text font size reduces from 36 to 30 for better readability on smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component is available on the free plan. # Testimonial 02 Source: https://docs.brikl.co/components/marketing/testimonials/testimonial-02 Centered testimonial section with a large quote, avatar, name, role, and a row of brand logos below. ![Testimonial 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Testimonials/testimonials-list-of-logos-bis.png) ## Overview Testimonial 02 is a marketing component designed to showcase a single featured customer quote alongside the reviewer's avatar, name, and role. Below the testimonial, a horizontal row of recognizable brand logos (Intercom, Mailchimp, Feedly, Unsplash, Pinterest) adds social proof. The layout is clean and centered, suitable for landing pages or product pages to build trust with potential users. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Testimonial 02** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | Mobile font size | Current Page Width is less than or equal to 768px | The testimonial quote text font size reduces from 36px to 30px for better readability on smaller screens. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Testimonial 03 Source: https://docs.brikl.co/components/marketing/testimonials/testimonial-03 Centered testimonial section with header, star rating, quote text, and customer profile. ![Testimonial 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Testimonials/testimonials-review-with-stars-bis.png) ## Overview Testimonial 03 is a marketing component designed to showcase customer reviews and social proof. It features a header section with a title and subtitle, followed by a detailed review card that includes a 5-star rating, a highlighted quote, full testimonial body text, and a customer profile area with name and role. It is ideal for landing pages or product pages to build trust with potential users. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Testimonial 03** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Mobile Layout | Current Page Width is less than or equal to 768px | Header title font size reduces from 36 to 30, review quote font size reduces from 36 to 24, and review card padding adjusts to 24px on all sides for better mobile readability. | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Testimonial 04 Source: https://docs.brikl.co/components/marketing/testimonials/testimonial-04 Centered testimonial card with quote, avatar, name, role, and category badge on light background. ![Testimonial 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Testimonials/testimonials-review-with-badge-bis.png) ## Overview Testimonial 04 is a marketing component designed to showcase a single customer testimonial. It features a styled card with a large quote text, a customer avatar image, the customer's name and role, and a category badge. The layout is centered and responsive, adapting padding and font sizes for smaller screens. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Testimonial 04** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Mobile Layout | Current Page Width is less than or equal to 768px | Reduces font size of the quote text from 36 to 30 and adjusts padding on the review card from 64px to 24px on all sides | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Testimonial 05 Source: https://docs.brikl.co/components/marketing/testimonials/testimonial-05 Centered testimonials section with header, customer reviews, avatars, logos, and verified badges. ![Testimonial 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Testimonials/testimonials-review-card-with-logo-bis.png) ## Overview Testimonial 05 is a marketing component designed to showcase customer reviews and social proof. It features a header section with a title and subtitle, followed by a list of review cards. Each card includes a testimonial quote, customer avatar, name with a verified badge, job title, and company logo, creating a credible and visually structured testimonials section. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Testimonial 05** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ---------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------- | | Mobile header font size | Current Page Width is less than or equal to 768px | Header text font size reduces from 36 to 30 | | Mobile review text font size | Current Page Width is less than or equal to 768px | Review quote font size reduces from 20 to 18 | | Stacked review card layout | Current Page Width is less than or equal to 1024px | Review cards and customer detail groups expand to 100% width, switching to stacked layout | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Testimonial 06 Source: https://docs.brikl.co/components/marketing/testimonials/testimonial-06 Centered testimonial grid with avatar, star rating, name badge, and review text in card layout. ![Testimonial 06](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Testimonials/testimonials-grey-reviews-card-bis.png) ## Overview Testimonial 06 is a 'Wall of Love' marketing component designed to showcase customer reviews in a structured grid format. It features customer avatars, verified badge icons, star ratings, and review text. The component is ideal for social proof sections on landing pages, helping build trust with potential users by displaying authentic customer feedback in a visually appealing layout. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Testimonial 06** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | --------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------- | | Mobile Header | Current Page Width is less than or equal to 768px | Header text font size reduces from 36px to 30px for better mobile readability | | Full-width Review Card | Current Page Width is less than or equal to 1024px | Individual review cards expand to 100% minimum width, stacking vertically | | Full-width Customer Details | Current Page Width is less than or equal to 375px | Customer details section expands to 100% minimum width for small screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Testimonial 07 Source: https://docs.brikl.co/components/marketing/testimonials/testimonial-07 Centered testimonials section with header, star ratings, customer avatars, names, roles, and review text cards. ![Testimonial 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Testimonials/testimonials-reviews-card-with-socials-bis.png) ## Overview Testimonial 07 is a marketing component designed to showcase customer reviews in a structured card-based layout. It features a header section with a title and subtitle, followed by a list of review cards. Each card includes a customer avatar, name, role, review text, and a Twitter icon, providing social proof for product or service pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Testimonial 07** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------- | | Mobile Header Font Resize | Current Page Width is less than or equal to 768px | The header title font size reduces from 36 to 30 to fit smaller screens | | Mobile Card Full Width | Current Page Width is less than or equal to 375px | The duo review group expands to 100% minimum width for single-column layout on small screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Testimonial 08 Source: https://docs.brikl.co/components/marketing/testimonials/testimonial-08 Split testimonial layout with featured avatar card, main quote block, and trio review cards. ![Testimonial 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Testimonials/testimonials-with-main-review-bis.png) ## Overview Testimonial 08 is a marketing component designed to showcase customer reviews in a visually structured layout. It features a prominent main testimonial with an avatar image, reviewer name, badge, and role, alongside three additional supporting reviews. The component is ideal for building trust and social proof on landing pages or product pages. ## How to use Navigate to the **Marketings** category in the Brikl panel. Find **Testimonial 08** and click **Copy**. Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**. ## States This component includes conditional states that automatically change its appearance. | State | Trigger | Visual effect | | ------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Mobile Layout | Current Page Width is less than or equal to 1024px | Groups switch to full-width (100%) and adjust min-height, font sizes reduce (e.g. main review text drops from 30px to 20px), and layout adapts for smaller screens | These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor. ## Responsive This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint. ## Requirements | | | | ----------- | --------------------- | | License | Starter plan required | | Plugins | None | | Custom code | Not required | ## Platforms | Platform | Supported | | -------- | --------- | | Web | ✅ | | Mobile | ❌ | ## License This component requires a **Starter** plan. # Disclaimer Source: https://docs.brikl.co/disclaimer This section outlines the limitations of liability and clarifies the responsibilities associated with the use of the products and tools provided. ## 1. Templates The templates are provided as-is, without guarantees of specific results or compatibility with all custom implementations. Users remain responsible for how they modify, deploy, and use them in their own projects. ### 1.1. General Nature of the Templates All templates provided by Brikl and distributed through the Bubble Marketplace are digital development resources designed to accelerate the creation of applications on the Bubble platform. Templates are provided as structured starting points. They are not turnkey, fully customized, production-ready applications unless explicitly stated. By purchasing or using a template, you acknowledge that you are responsible for reviewing, configuring, testing, and adapting it to your specific project requirements before deploying it to a live environment. ### 1.2. Independent Seller Statement Brikl is an independent creator and is not affiliated with, endorsed by, or officially associated with Bubble Group, Inc. Templates are sold via the Bubble Marketplace and are therefore subject to: * Bubble’s Marketplace Policies * Bubble’s platform terms * Bubble’s licensing structure * Bubble’s payment processing system All marketplace-related processes (including payment handling and platform enforcement) are governed by Bubble. ### 1.3. “As Is” Provision All templates are provided on an “as is” and “as available” basis. We make no warranties, express or implied, including but not limited to: * Fitness for a particular purpose * Merchantability * Continuous compatibility with Bubble updates * Error-free operation * Suitability for high-traffic or enterprise environments Use of any template is at your own risk. ### 1.4. Platform Dependency Templates are built specifically for the Bubble platform. You acknowledge that: * Bubble may update its editor, engine, pricing, or infrastructure at any time * Such changes may impact template behavior, performance, or compatibility * We do not control Bubble’s roadmap or technical changes We do not guarantee permanent compatibility with future versions of Bubble. ### 1.5. Customization and Implementation Responsibility Once a template is duplicated into your Bubble account: * You assume full responsibility for all modifications * You are responsible for workflows, database structure, privacy rules, and API connections * You are responsible for testing before deployment Brikl does not monitor or control how templates are modified after purchase. ### 1.6. Third-Party Integrations Templates may reference or integrate third-party services, including but not limited to: * Payment providers (e.g., Stripe) * External APIs * Bubble plugins * Third-party authentication systems We are not responsible for: * Third-party outages * API changes * Plugin incompatibilities * Pricing changes * Security incidents * Service disruptions Use of third-party services is governed by their respective terms. ### 1.7. No Legal, Financial, or Compliance Advice Templates are development tools only. They do not constitute: * Legal advice * Financial advice * Regulatory compliance certification * Security certification If you operate in regulated industries (finance, healthcare, SaaS handling personal data, etc.), you are solely responsible for ensuring compliance with applicable laws and regulations. ### 1.8. Data and Security Responsibility Brikl does not host, access, or store user data contained in applications built using the templates. You are solely responsible for: * Database configuration * Privacy rules * Security settings * Data protection compliance * Backup procedures Any data loss, misconfiguration, or breach occurring within your application is your responsibility. ### 1.9. Performance and Scalability Templates are designed as functional foundations and may require optimization depending on: * Traffic volume * Database size * Infrastructure configuration * Workflow complexity We do not guarantee enterprise-level performance, scalability, or load resilience. Performance optimization remains the responsibility of the user. ### 1.10. Refund and Marketplace Fees Templates sold through the Bubble Marketplace are subject to Bubble’s payment processing system and marketplace policies. All refund requests must first be submitted directly to **Bubble**, in accordance with Bubble’s own refund and marketplace policies. Bubble will review refund requests based on their internal criteria and applicable marketplace rules. If Bubble determines that they are unable to process or authorize a refund and explicitly instructs you to contact the template creator, you may then submit a refund request directly to us in accordance with our Refund Policy. Our Refund Policy can be found here: [Privacy Policy](/privacy-policy) Refund eligibility, processing, and any applicable limitations will be handled strictly according to the terms outlined in that policy. We are not responsible for: * Refund decisions made by Bubble * Marketplace fees retained by Bubble * Delays caused by Bubble’s internal review process By purchasing a template via the Bubble Marketplace, you acknowledge that refund processing is primarily governed by Bubble’s platform policies. ### 1.11. Limitation of Liability To the maximum extent permitted by law, Brikl shall not be liable for: * Business losses * Lost revenue or profits * Service interruption * Data loss * Platform penalties * Indirect or consequential damages Total liability shall not exceed the amount paid for the specific template. ### 1.12. Updates and Modifications We may release updates, improvements, or fixes at our discretion. However: * Updates are not guaranteed * Ongoing maintenance is not guaranteed * Compatibility with future Bubble versions is not guaranteed We reserve the right to discontinue support for any template at any time. ## 2. Brikl Chrome Extension The extension is provided as-is and is intended to assist with workflow efficiency. The user is responsible for how it is used, and no liability is assumed for issues resulting from misuse, conflicts, or platform changes. ### 2.1. Nature of the Extension The Brikl Chrome Extension is a development tool designed to assist users in building applications on the Bubble platform. The extension allows users to browse, access, and copy pre-built UI components directly into the Bubble editor. The extension does not create complete applications. It provides reusable interface components intended to be customized and integrated by the user. ### 2.2. No Affiliation with Bubble Brikl is an independent software provider and is not affiliated with, endorsed by, or officially associated with Bubble Group, Inc. The extension operates within the Bubble editor environment but is not developed, reviewed, or maintained by Bubble. All references to “Bubble” refer to a third-party platform over which we have no control. ### 2.3. “As Is” Provision The Chrome extension and all UI components are provided on an “as is” and “as available” basis. We make no warranties, express or implied, including but not limited to: * Continuous availability * Error-free operation * Compatibility with all Bubble features * Compatibility with all third-party plugins * Fitness for a particular business purpose Use of the extension and components is at your own risk. ### 2.4. Platform Dependency The extension depends on: * The Chrome browser * The Bubble editor * Bubble’s internal structure and rendering system Changes made by Bubble to its editor, DOM structure, or technical architecture may affect the behavior of the extension or inserted components. We do not guarantee compatibility with future Bubble updates. ### 2.5. Component Insertion and User Responsibility When a component is copied into your Bubble project: * You are fully responsible for reviewing the inserted elements * You are responsible for configuring workflows * You are responsible for database structure * You are responsible for privacy rules and security settings * You are responsible for testing before deploying Brikl does not automatically modify your application without user interaction. We are not responsible for errors resulting from user customization, misconfiguration, or improper implementation. ### 2.6. Licensing and Access Control Certain features of the extension may require an active paid license. Access to licensed features is governed by: * Your selected subscription or license plan * Successful payment processing * Compliance with our Terms of Service We reserve the right to: * Suspend or revoke access in case of misuse * Modify licensing tiers * Update pricing structures We are not responsible for access interruptions caused by third-party payment providers or authentication services. ### 2.7. Third-Party Services The extension may rely on third-party services, including but not limited to: * Stripe (payment processing) * Supabase (authentication and database infrastructure) * Loops (email processing) * Chrome Web Store infrastructure We are not responsible for: * Service outages * API changes * Data loss within third-party systems * Security incidents outside our infrastructure * Changes to third-party terms or pricing Use of third-party services is governed by their respective terms. ### 2.8. Performance and Scalability UI components are designed to provide structured and consistent interfaces. We do not guarantee that: * Inserted components are optimized for all performance scenarios * Components are suitable for high-traffic production systems without modification * Complex workflows will scale automatically Performance optimization and scalability adjustments remain the responsibility of the user. ### 2.9. No Data Hosting The extension does not host or store user application data from Bubble projects. Brikl does not access your application database unless explicitly required for licensing validation or support. You are solely responsible for: * Data protection compliance * Privacy configuration * Security rules * Backup and recovery procedures ### 2.10. Security Disclaimer While we implement reasonable technical safeguards, no software can guarantee complete security. You acknowledge that: * Browser extensions carry inherent technical risk * Software vulnerabilities may exist * You are responsible for reviewing permissions before installation We are not liable for damages arising from unauthorized use, security breaches, or external attacks. ### 2.11. Updates and Modifications We may update, modify, add, or remove components and features at our discretion. We are not obligated to: * Maintain backward compatibility indefinitely * Provide updates for legacy versions * Preserve specific components permanently ### 2.12. Limitation of Liability To the maximum extent permitted by law, Brikl shall not be liable for: * Business losses * Lost revenue * Data loss * Application downtime * Indirect or consequential damages Total liability shall not exceed the amount paid for the applicable license. # E-Tutor Source: https://docs.brikl.co/e-tutor Advanced Level : High level of Bubble experience and complex design, workflow and data requirements. Mockup E Tutor ## Overview This template provides a complete, ready-to-use foundation for building an online course platform. It covers the entire user journey, from sign-up and login through course purchase, progress tracking, and platform administration, so you can focus on your content rather than building infrastructure from scratch. The template includes dedicated dashboards for students, instructors, and administrators, a built-in pricing system that handles taxes and coupons, and a fully responsive design that works seamlessly across all devices. It also comes with a quick style system to accelerate customization, full documentation, and reactive support to help you get up and running fast. ## Functionalities Simplify access to the platform with an intuitive sign-in and login page for all users. Easily manage your purchased courses, track your progress and access your favorite content via a user-friendly dashboard. Publish and manage your courses, track sales and interact with students through a comprehensive and intuitive dashboard. Monitor the entire platform, manage users and courses, and access detailed statistics for effective administration. Enjoy a modern and clean design that fits perfectly on all devices, providing an optimal user experience. Get more done with an integrated style system that speeds up the creation and management of your content. Offer transparent and competitive prices with an automatic system of integrating taxes and coupons in the calculation of the final price. Access detailed documentation that covers all the platform’s features, making it easy to get started and use. Get responsive and professional technical support to quickly resolve all your questions and concerns. ## Pages E-Tutor platform homepage offers an overview of popular courses, featured instructors, and new updates. This is the starting point to explore the offers and discover the platform’s features. This page displays all the courses added by the user to his cart. It allows you to apply discount coupons and see the total to pay before proceeding with the payment. The checkout page allows users to complete their purchase. The instructor dashboard allows them to manage their courses, track sales, interact with students, and access performance statistics. The users dashboard displays purchased courses, progress of current courses and allows you to manage account settings. The administrator dashboard allows you to supervise the entire platform. They can manage users, prices, transactions and access detailed analyses. This page details a specific course, including the syllabus, learning objectives, student feedback and instructor information. The viewing page allows users to access the content of courses they have purchased. They can watch the videos, download resources and track their progress. The registration page allows new users to create an account on the platform by entering their personal information and preferences. The login page allows existing users to log in to their account using their email address and password. This page displays a complete list of all courses available on the platform. Users can filter courses by category, level, price and title. This page presents all the instructors registered on the platform, with a search feature to find an instructor by name The job opportunities page details available positions at E-Tutor, required qualifications and benefits offered. The contact page allows users to ask questions, request help or provide feedback via a contact form. The FAQ page provides answers to frequently asked questions from users, covering various aspects of using the platform. This page details the profile of a specific instructor, including his or her biography, the courses he offers and student reviews. The "About Us" page presents the history, mission, values and team behind E-Tutor, giving an insight into the company. This page provides specific details about a particular job offer at E-Tutor, including responsibilities, qualifications required and an application form. This page allows users to reset their password. The 404 page is displayed when the user tries to access a non-existing page. It offers links to the main sections of the site to help you find your way back. ## Reusable Elements A collection of shared components built to be used across multiple pages, helping maintain design consistency while making updates and scaling more efficient. A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit. The header is a reusable element present on all pages of the platform. It includes a search box that allows users to quickly find courses, as well as navigation buttons for easy access to main pages such as the home, Courses, instructors, dashboard and login/sign-in pages. The footer is a reusable element located at the bottom of each page. It features various navigation links leading to important pages like "About us", "Contact", "FAQ", "Careers", and social networks. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Datatypes The database consists of different **data types** that you as the developer plan and set up. Data types are like containers that hold specific types of information and each data type is made up of **fields** where that information is stored. ### User | Field Name | Type | Note | | ----------------- | --------------------------- | ----------------------------------------------------------------------- | | First Name | `text` | Contains the user’s first name | | Last Name | `text` | Contains the user’s last name | | Profession | `text` | Contains the user’s profession | | Photo | `image` | Contains the user's profile photo | | Terms | `yes/no` | Determines whether the user agrees to the platform terms and conditions | | Instructor | `Instructor ID` | **Contains the Instructor ID if this user is an instructor** | | Wishlist | `List of Courses` | **List of Courses liked by the user** | | Courses Completed | `List of Courses` | **List of Courses completed by the user** | | Courses Purchased | `List of Courses` | **List of Courses purchased by the user** | | Lectures Finished | `List of Lectures` | **List of Lectures finished by the user** | | Status | `User Status (Option Sets)` | **Contains the user’s account type** | | Verification Code | `text` | Contains the verification code received by the user | | Verified | `yes/no` | Indicates whether the user’s account has been verified or not | | Expiration Code | `date` | Contains the verification period | ### Instructor | Field Name | Type | Note | | ------------- | ----------------------- | ------------------------------------------------------------------------------ | | Biography | `text` | Contains the instructor's biography | | Completed | `yes/no` | Determines if the instructor profile is complete | | Demo ⚠️ | `yes/no` | Determines if it is a demo account | | Facebook | `text` | Contains the link to the instructor’s facebook page | | Instagram | `text` | Contains the link to the instructor’s instagram page | | Linkedin | `text` | Contains the link to the instructor’s linkedin page | | Twitter | `text` | Contains the link to the instructor’s twitter page | | Youtube | `text` | Contains the link to the instructor’s youtube channel | | Whatsapp | `text` | Contains the link to the instructor’s whatsapp | | Website | `text` | Contains the link to the instructor’s website | | Notifications | `List of Notifications` | **Contains notifications that concern the instructor’s activity** | | Students | `List of Users` | **Contains the list of users who have purchased courses from this instructor** | | Phone | `number` | Contains the instructor’s phone number | ### Courses | Field Name | Type | Note | | ------------- | --------------------- | --------------------------------------------------------------------------------- | | Title | `text` | Contains the course title | | Trailer Video | `text` | Contains the link to the course presentation video | | Thumbnail | `image` | Contains the course thumbnail | | Coupon | `number` | Contains the discount that may be applied to the price of the course | | Demo ⚠️ | `yes/no` | Determines if it is a demo course | | Teach | `List of text` | Contains the list of main elements that will be taught in this course | | Audience | `List of text` | Contains the list of target audience for this course | | Requirements | `List of text` | Contains the list of prerequisites to take this course | | Subtitle | `text` | Contains the course subtitle | | Sub-Category | `Course Sub-Category` | **Contains the subcategory in which this course is located** | | Students | `number` | Contains the number of users who have purchased this course | | Status | `Course Status` | **Determine whether the course is in draft, verification, rejected or published** | | Price | `number` | Contains the course price | | Description | `text` | Contains the course description | | Duration | `Course Duration` | **Contains the course duration** | | Language | `Course Language` | **Contains the course language** | | Level | `Course Level` | **Contains the course level** | ### Section | Field Name | Type | Note | | ---------- | ----------- | ---------------------------------------------------------------- | | Course | `Course ID` | **Contains the course ID where this section will be integrated** | | Name | `text` | Contains the name of the section | ### Lecture | Field Name | Type | Note | | ------------ | ------------ | ---------------------------------------------------------------------------------- | | Course | `Course ID` | **Contains the course ID where this lecture will be integrated** | | Description | `text` | Contains the description of the lecture | | Lecture File | `file` | Contains the document related to this lecture, which can be downloaded by the user | | Section | `Section ID` | **Contains the ID of the section in which this lecture is located** | | Title | `text` | Contains the title of this lecture | | Video Link | `text` | Contains the link to the video of this lecture | ### Coupon | Field Name | Type | Note | | ---------- | -------- | ------------------------------------- | | Code | `text` | Contains the coupon code | | Value | `number` | Contains the value of the coupon code | ### Cart | Field Name | Type | Note | | ----------- | ----------- | --------------------------------------------------------------------- | | Course | `Course ID` | **Contains the course place in the shopping cart by the user** | | Coupon Code | `text` | Contains the the coupon code used by the user | | Coupon | `number` | Contains the value of the coupon used by the user in percent (%) | | Demo ⚠️ | `yes/no` | Determines if it is a demo cart | | Fees | `number` | Contains the commission that goes to the platform | | Discount | `number` | Contains the value of the coupon used by the user formatted in number | | Taxes | `number` | Contains the tax to be paid by the client (20% of the subtotal) | | Ordered | `yes/no` | Indicates whether this shopping cart has been ordered or not | | Subtotal | `number` | Contains the total of the shopping cart (excluding other fees) | ### Order | Field Name | Type | Note | | ------------ | --------------------- | ------------------------------------------------------------- | | Client Total | `number` | Contains the total amount to be paid by the customer | | Instructors | `List of Instructors` | **Contains the list of instructors affected by this command** | | Cart | `List of Carts` | **Contains all the details of the shopping cart ordered** | | Demo ⚠️ | `yes/no` | Determines if it is a demo order | ### Course Reviews | Field Name | Type | Note | | ---------- | ----------- | ------------------------------------------- | | Course | `Course ID` | **Contains the Course that has been rated** | | Comments | `text` | Contains the comment left by the user | | Rating | `number` | Contains the note left by the user | | Demo ⚠️ | `yes/no` | Determines if it is a demo course review | ### Instructor Review | Field Name | Type | Note | | ---------- | --------------- | ----------------------------------------------- | | Instructor | `Instructor ID` | **Contains the Instructor that has been rated** | | Comments | `text` | Contains the comment left by the user | | Rating | `number` | Contains the note left by the user | ### Job | Field Name | Type | Note | | ------------ | ------------------------ | ---------------------------------------------------------- | | Address | `text` | Contains the exact address for this position | | Benefits | `List of text` | Contains the list of benefits for this position | | City | `text` | Contains the city for this position | | Country | `text` | Contains the country for this position | | Deadline | `date` | Contains the deadline to apply for the job | | Description | `text` | Contains the description of the job | | Job Type | `Job Type (Option Sets)` | Contains the type of job (Full Time, Part Time, Flex Time) | | Max Salary | `number` | Contains the maximum salary for this position | | Min Salary | `number` | Contains the minimum salary for this position | | Publish | `yes/no` | Determines if the ad is published on the platform | | Requirements | `List of text` | The list of prerequisites to apply for this position | | Title | `text` | Contains the job title | ### Lecture Comments | Field Name | Type | Note | | ---------- | ------------ | ------------------------------------------- | | Comments | `text` | The user’s comment in relation to a lecture | | Lecture | `Lecture ID` | **The lecture concerned by this comment** | ### Lecture Reply | Field Name | Type | Note | | ---------------- | --------------------- | --------------------------------------------------------- | | Lecture | `Lecture ID` | **Contains the lecture affected by this response** | | Lecture Comments | `Lecture Comments ID` | **Contains the comment to which the instructor responds** | | Reply | `text` | Contains instructor response | ### Notifications | Field Name | Type | Note | | ---------- | -------------------------------------- | ------------------------------------------------------------------------------------------ | | Category | `Notifications Category (Option Sets)` | **Contains the type of notifications that will be received (Purchase, Reviews, Comments)** | | Message | `text` | The message that will be sent to the recipient | | Recipients | `List of Users` | **The list of users who will receive this notification** | ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### Admin Dashboard This option set defines the different navigation tabs within the admin dashboard. It is used to control internal navigation and manage which section. | Attributes | Type | Note | | ---------- | ------ | ----------------------------------------- | | Display | `text` | The label shown for each tab. | | Icon | `text` | The Iconify icon associated with the tab. | * Home * Courses * Instructors * Users * Orders * Reviews * Jobs * Settings ### Course Category Lists the main categories used to classify courses on the platform. | Attributes | Type | Note | | ---------------- | ------ | ---------------------------------------------------------------------- | | Display | `text` | The name of the category. | | Icon | `text` | The Iconify icon representing the category. | | Icon Color | `text` | The HEX color applied to the icon. | | Background Color | `text` | The background color for the category badge or secondary accent color. | * IT & Software * Finance & Accounting * Music * Marketing * Design * Photography & Video * Health & Fitness * Business ### Course Duration Defines the available duration ranges used to filter or describe course length. | Attributes | Type | Note | | ---------- | ------ | ------------------------- | | Display | `text` | The duration range label. | * 6-12 Months * 3-6 Months * 1-3 Months * 1-4 Weeks * 1-7 Days ### Course Language Lists the languages in which courses can be offered. | Attributes | Type | Note | | ---------- | ------ | ------------------------- | | Display | `text` | The name of the language. | * French * English * Spanish * German * Portuguese ### Course Level Indicates the difficulty level of a course. | Attributes | Type | Note | | ---------- | ------ | ---------------------------------------------------- | | Display | `text` | The level label (Beginner, Intermediate, or Expert). | * Beginner * Intermediate * Expert ### Course Status Tracks the current publication state of a course throughout its lifecycle. | Attributes | Type | Note | | ---------------- | ------ | -------------------------------------------------------------------- | | Display | `text` | The status label (Draft, Verification, Published, or Rejected). | | Icon | `text` | The Iconify icon representing the status. | | Icon Color | `text` | The HEX color applied to the status icon. | | Background Color | `text` | The background color for the status badge or secondary accent color. | * Draft * Verification * Published * Rejected ### Course Sub-Category Lists the sub-categories used to further refine course classification within a main category. | Attributes | Type | Note | | --------------- | ---------- | ------------------------------------------------- | | Display | `text` | The name of the sub-category. | | Course Category | `Category` | The parent category this sub-category belongs to. | * Web Development * Cybersecurity * IA & Machine Learning * Big Data * Project Management * Entrepreneurship * Human Resource * Business Strategy * Composition and Theory * Music Production * Instruments * Song and Voice * General Accounting * Investment * Financial Management * Fiscality * Digital Marketing * Marketing Strategy * Network Marketing * Publicity * Graphic Design * UX/UI Design * Interior Design * Products Design * Photography * Video * Equipment * Advanced Techniques * Fitness Training * Nutrition & Dietetics * Mental Health * Well-being & Life Style ### Create/Edit Course Tab Defines the step-by-step tabs displayed when creating or editing a course. | Attributes | Type | Note | | ---------- | ------ | ---------------------------------------------------------------------- | | Display | `text` | The tab label (Basic Information, Advance Information, or Curriculum). | | Icon | `text` | The Iconify icon associated with the tab. | * Basic Information * Advance Information * Curriculum ### Instructor Dashboard Defines the tabs displayed in the instructor dashboard navigation. | Attributes | Type | Note | | ---------- | ------ | ----------------------------------------- | | Display | `text` | The label shown for each tab. | | Icon | `text` | The Iconify icon associated with the tab. | * Dashboard * Create New Course * My Courses * Earning * Settings ### Job Type Lists the employment types available for instructor or team profiles. | Attributes | Type | Note | | ---------- | ------ | ---------------------------------------------------- | | Display | `text` | The type label (Full Time, Part Time, or Flex Time). | * Full Time * Part Time * Flex Time ### My Course Tab Defines the view options available in the instructor's course management section. | Attributes | Type | Note | | ---------- | ------ | ----------------------------------------------------- | | Display | `text` | The tab label (Search, Edit Course, or View Details). | * Search * Edit Course * View Details ### Notifications Settings Lists the individual notification preferences a user can enable or disable. | Attributes | Type | Note | | ---------- | ------ | -------------------------------------------- | | Display | `text` | The description of the notification setting. | * I want to know who buy my course. * I want to know who write a review on my course. * I want to know who commented on my lecture. * I want to know who download my lecture notes. * I want to know who replied on my comment. * I want to know daily how many people visited my profile. * I want to know who download my lecture attach file. ### Notifications Category Groups notifications into high-level categories for easier management. | Attributes | Type | Note | | ---------- | ------ | -------------------------------------------------- | | Display | `text` | The category name (Purchase, Review, or Comments). | | Icon | `text` | The Iconify icon representing the category. | * Purchase * Reviews * Comments ### Student Dashboard Defines the tabs displayed in the student dashboard navigation. | Attributes | Type | Note | | ---------- | ------ | ----------------------------- | | Display | `text` | The label shown for each tab. | * Dashboard * Courses * Wishlist * Purchase History * Settings ### Users Status Identifies the role assigned to users within the template demo environment. | Attributes | Type | Note | | ---------- | ------ | -------------------------------- | | Display | `text` | The status label (Demo or Admin) | * Demo * Admin ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### Feather Icons Free Visual icon elements from the Feather Icons suite ([https://feathericons.com/](https://feathericons.com/)). Customize the color, fill color, and stroke width. Elements should maintain the standard Bubble element properties. ### Animated Rating Stars Free Add animated star rating input with configurable size, colors, and default value. Supports static and interactive modes, user interaction events, responsive layout, and rating reset actions. ### Chart Element Free Add a chart element to your application. You can display line, bar charts or polar charts. ### Air Copy To Clipboard Free The Air Copy to Clipboard plugin for the Bubble application allows users to copy text to the clipboard with a single action. ### **Reveal & Hide Password** Free Toggle password visibility in Bubble input fields using a reveal/hide icon. Supports icon size, color, position, default visibility state, multiple inputs, and dynamic control with minimal setup. ### **Rich Text Editor** Free Enable your users to write rich, formatted text in an input. Compatible with text elements and email. ### Toolbox Free Javascript and utility elements: List of Numbers, Expression, Javascript to Bubble, List Item Expression, Run javascript (workflow action), Server script (server workflow action). ### Iconify Free Unofficial Iconify plugin. Add any Icon from [http://iconify.design](http://iconify.design) to you application, change it's color\*, flip it, rotate it\*, resize it, just do what you want. ### Progress Bar Free The Progress Bar Plugin creates an element that displays a progress bar that shows the user what percentage of a task is completed. ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Elevate Source: https://docs.brikl.co/elevate Beginner Level : Simple templates for new users with little to no Bubble experience. Mockup Elevate ## Overview Elevate is a fully static, single-page SaaS landing page template designed for payment and fintech products. It reproduces the layout and design of a modern, conversion-optimized SaaS product page. No database setup is required — the template is ready to customize out of the box. The page is structured into clearly defined sections that scroll from top to bottom: **Navbar** : A top navigation bar with a logo on the left, navigation links (Product, Use Cases, Team, Resources, Pricing) in the center, and a "Get started" CTA button on the right. **Hero Section** : A bold above-the-fold section with a main headline, a descriptive subheadline, a primary CTA button, and a product UI mockup showcasing a payments dashboard. Social proof logos (Frontporch, Layers, LightSwap, Payments) are displayed below. **Features Section** : A two-column layout highlighting key product features — Effortless Card Transfers, Transfer to Card, Instant Deposit, and API Transfers — each accompanied by a UI preview mockup and a short description. **Value Proposition Section** : A four-pillar section emphasizing Speed, Protection, Automation, and Design-to-Scale, reinforcing the product's core benefits. **Social Proof / Testimonials** : A dedicated section presenting customer logos and short testimonials to build trust, with references to real-world integrations and use cases. **API Section** : A developer-focused section titled "The powerful payments API built for product teams," highlighting API capabilities alongside a code preview and integration logos. **Complete Solution Section** : A section positioning Elevate as a complete payment solution, highlighting Quick and Protected properties with partner logos and integration icons. **Documentation Section** : A section titled "Well-crafted documentation that turns users into customers," featuring documentation UI previews for both non-developers and developers. **Blog / Resources Section** : A two-column section with resource cards to drive engagement and knowledge transfer around payment best practices. **Pricing Section** : A two-tier pricing section with a Free "Start" plan and a paid "Pro" plan at \$40, each with a clear list of included features. **FAQ Section** : A collapsible accordion section titled "You asked, we answered," addressing common questions from potential customers. **Final CTA Section** : A full-width closing call-to-action block with a headline and a "Get started" button to drive conversions, followed by a short dashboard preview. **Footer** : A multi-column footer with navigation links organized by category, logo, and legal mentions. ## Functionalities The template is designed to adapt seamlessly to all screen sizes and devices, ensuring a consistent and optimized experience on desktop, tablet, and mobile. This template is entirely static. There is no database configuration needed, making setup straightforward and the template easy to maintain and deploy. A top navigation bar with a logo on the left, navigation links in the center (Product, Use Cases, Team, Resources, Pricing), and a "Get started" CTA button on the right. Adapts to mobile with a responsive menu. A large above-the-fold section with a bold headline, a descriptive subheadline, a primary CTA button with star ratings, and a product UI dashboard mockup. Social proof logos are displayed below the mockup. A multi-column section showcasing the core product features with illustrated UI mockups, short titles, and descriptive paragraphs. Covers card transfers, transfer-to-card flows, instant deposits, and API transfers. A four-pillar section presenting the product's key benefits: Speed, Protection, Automation, and Design-to-Scale. Each pillar includes a short label and a one-liner description. A section presenting customer testimonials and product integrations. Includes company logos and short quotes to reinforce trust and credibility. A developer-focused section highlighting the payment API's capabilities for product teams, with integration logos, feature bullet points, and a link to the documentation. A section positioning the product as a full payments solution, with integration logos, partner icons, and two key benefit highlights (Quick and Protected). A section showcasing the product's documentation quality as a selling point, with UI previews targeted at both non-developers and developers. Includes two cards — "Starting right from the start" and "For your developer developers." A two-column resource section with cards linking to articles or guides on payment best practices, onboarding, and advanced usage. A two-tier pricing layout featuring a Free "Start" plan and a paid "Pro" plan at \$40/month. Each plan includes a list of included features and a CTA button. An accordion-based FAQ section titled "You asked, we answered," powered by an Option Set. Questions and answers are stored as static options and rendered dynamically via a repeating group. A full-width closing call-to-action block with a bold headline, a "Get started" button, and a brief product dashboard preview to encourage sign-up at the bottom of the page. A multi-column footer with navigation links organized by category, a logo, and legal mentions including copyright information. A clean, contemporary interface built with strong visual hierarchy, generous white space, a green accent color palette, and consistent typographic choices to maximize readability and conversion. A clearly organized workflow architecture using logical grouping and visual categorization to improve readability, scalability, and long-term maintainability. ## Pages The main and only page of the template. It contains all sections of the landing page in order: Navbar, Hero, Social Proof Logos, Features, Value Proposition, Testimonials, API Section, Complete Solution, Documentation, Blog/Resources, Pricing, FAQ, Final CTA, and Footer. ## Reusable Elements A collection of shared components built to be used across multiple pages, helping maintain design consistency while making updates and scaling more efficient. A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit. The top navigation bar, built as a reusable element and shared across pages. It contains the logo, navigation links (Product, Use Cases, Team, Resources, Pricing), and the "Get started" CTA button. Using a reusable element ensures that any update to the header is automatically reflected everywhere it is used. The bottom section of the page, built as a reusable element. It includes multi-column navigation links organized by category, the brand logo, and legal mentions. Centralizing the footer as a reusable element makes it easy to maintain and update site-wide. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### FAQ Groups the frequently asked questions displayed to visitors in the "You asked, we answered" section. Each option pairs a question with its corresponding answer. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------- | | Display | `text` | Text of the question displayed in the FAQ section | | Answer | `text` | Text of the answer associated with the question | * What is included in the free trial? * What payment methods do you accept? * Is my financial data secure? * Do you offer customer support? * Are there any discounts available? ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### Iconify Free Unofficial Iconify plugin. Add any Icon from [http://iconify.design](http://iconify.design) to your application, change its color, flip it, rotate it, resize it — full customization with minimal setup. ### Animated Rating Stars Free A five-star rating element that animates on click and displays a mood indicator based on the selected rating. Supports autobinding and exposes the selected rating via a custom state. The mood face can be hidden from the plugin settings. ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Fashionshop Source: https://docs.brikl.co/fashionshop Intermediate Level : Intermediate level of Bubble experience with standard design, workflow and data requirements. Mockup Fashion Shop ## Overview FashionShop is a complete, ready-to-use e-commerce template for clothing. It covers the entire customer journey, from sign-up with email verification through product browsing, cart management, checkout, and order tracking — all the way to platform administration. Focus on your catalog rather than building infrastructure from scratch. The template includes dedicated dashboards for customers and administrators, an automatic inventory update system on each purchase, a fully responsive design that adapts to all screen sizes, and a predefined style system to accelerate customization. It also comes with full documentation and reactive support to help you get up and running fast. ## Functionalities Set up a robust enrollment system with email verification to ensure the security and validity of accounts. Manage your store with ease with an intuitive admin dashboard. Control products, orders, and track performance at a glance. Save time in design with a predefined style system. Harmonize the look of your shop effortlessly. Simplify inventory management with an automatic update on each purchase. Avoid out-of-stock situations and ensure a smooth shopping experience. Quickly add new products to your catalog without difficulty. Grow your store without worrying about technical complexities. Enjoy an exceptional user experience, whether for customers browsing your store or administrators managing the backend. FashionShop adapts to all screens, ensuring smooth operation on all devices. Access detailed documentation that covers all the platform's features, making it easy to get started and use. Get responsive and professional technical support to quickly resolve all your questions and concerns. ## Allow Access This section explains how to unlock the template’s features. The restriction is intentionally in place to prevent users from adding or modifying data in the preview version. This ensures that no sensitive or inappropriate content can be displayed to other people viewing the template in the Bubble Marketplace. In order to access all the features of this template, you will need to purchase it and follow the following steps. Screen Database Access✅ Screen Databse Access2✅ Screen Workflows Access✅ Screen Workflows Access2✅ ## Pages Home page displaying all published products, with a newsletter subscription system to capture and retain visitors. The page that allows customers to find products precisely thanks to a filtering system by gender, type, price, and more. The page that details a specific product with photos, available colors and sizes, a description, and customer reviews. The page that groups all the products added by the user to their shopping cart, with a subtotal summary before checkout. The page that allows customers to enter their delivery and billing information, select a delivery option, and validate their order. The page dedicated to platform administrators, where they can manage products, stocks, orders, users, reviews, and newsletter subscriptions. The page dedicated to registered customers, where they can manage their personal information, view their orders, and access their wishlist. The page that details the history, vision, and mission of your company. The page where customers can contact you and ask specific questions. The platform administrator receives an email when each form is submitted. The page that details the return and refund policy of the platform. The page that details the terms and conditions of the platform. The page that allows users to register on the platform (client and administrators). The page that allows users to log in to the platform (client and administrators). The page that allows users to verify their email address via a code sent by email. The page that allows users to reset their password. A fully customized error page displayed when a user tries to access a non-existing page, with links back to the main sections of the site. ## Reusable Elements A collection of shared components built to be used across multiple pages, helping maintain design consistency while making updates and scaling more efficient. A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit. The header is a reusable element present on all pages of the platform. It includes the store logo, navigation links by product type, search input to find products by name, and buttons to log in or register. A mobile menu icon appears depending on screen size and contains all the same elements. The footer is a reusable element located at the bottom of each page. It features navigation links redirecting to important pages such as Contact us, Terms & Conditions, Returns & Refunds, and social network links. The FAQ is a reusable element positioned on certain pages such as the Checkout, so that customers can quickly find answers to their most common questions without leaving the page. The Popup Access informs users who preview the template that some features are limited until the template is purchased. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Datatypes The database consists of different **data types** that you as the developer plan and set up. Data types are like containers that hold specific types of information and each data type is made up of **fields** where that information is stored. ### Access | Field Name | Type | Note | | ---------- | -------- | -------------------------------------------------------------- | | Access ✅ | `yes/no` | Whether or not certain features of the template are accessible | ### Users | Field Name | Type | Note | | ----------------- | -------------------------------- | -------------------------------------------------------------------------- | | First Name | `text` | Contains the user's first name | | Last Name | `text` | Contains the user's last name | | Phone | `number` | Contains the user's phone number | | **Account Type** | **`Account Type (Option Sets)`** | **Contains the user's account type** | | Verification Code | `text` | Contains the verification code received by the user | | Expiration Code | `date` | Contains the verification period | | Agree Terms | `yes/no` | Indicates whether the user agrees with the platform's terms and conditions | | **Wishlist** | **`List of Products`** | **Contains products saved as favorites by the user** | ### Shipping Addresses | Field Name | Type | Note | | ----------------------- | -------- | ------------------------------------------------------------- | | Shipping First Name | `text` | Contains the first name of the user who receives the delivery | | Shipping Last Name | `text` | Contains the last name of the user receiving the delivery | | Shipping City | `text` | Contains the user's shipping city | | Shipping Country/Region | `text` | Contains the user's country of shipping | | Shipping Postal Code | `text` | Contains the user's shipping postal code | | Shipping Phone | `number` | Contains the phone number of the user receiving the delivery | | Delivery Instruction | `text` | Contains user delivery instructions | ### Billing Addresses | Field Name | Type | Note | | ---------------------- | ------ | ------------------------------------------------------------ | | Billing First Name | `text` | Contains the first name of the user who receives the invoice | | Billing Last Name | `text` | Contains the last name of the user who receives the invoice | | Billing City | `text` | Contains the city of the user's billing address | | Billing Country/Region | `text` | Contains the country of the user's billing address | | Billing Postal Code | `text` | Contains the postal code of the user's billing address | | Billing Street Address | `text` | Contains the billing address street | ### Products | Field Name | Type | Note | | ------------ | ---------------- | ------------------------------------------------------ | | Product Name | `text` | Contains the name of the product | | Gender | `text` | Contains the gender of the product (Men or Women) | | Price | `number` | Contains the initial price of the product | | Discount | `number` | Contains the discount applied on the price | | Description | `text` | Contains the full product description | | Images | `List of Images` | Contains all images of the product | | Product Type | `text` | Contains the type of product (T-shirt, Jeans, Hoodie…) | ### Stocks | Field Name | Type | Note | | ---------------- | ---------------- | --------------------------------------------------------------------------------------- | | Color | `text` | Contains the color of the product | | Size | `text` | Contains the size of the product | | Quantity | `number` | Contains the product quantity for the selected size and color | | Quantity Updated | `number` | Contains the number of products ordered that will be subtracted from the Quantity field | | **Product** | **`Product ID`** | **Contains the product concerned by this stock entry** | ### Carts | Field Name | Type | Note | | ----------- | ---------------- | ---------------------------------------------------------------- | | Color | `text` | Contains the color of the product selected by the user | | Size | `text` | Contains the size of the product selected by the customer | | Quantity | `number` | Contains the quantity of the product selected by the user | | Ordered | `yes/no` | Indicates whether this shopping cart has been ordered or not | | Subtotal | `number` | Contains the total of the shopping cart (excluding other fees) | | **Product** | **`Product ID`** | **Contains the product placed in the shopping cart by the user** | | **Stock** | **`Stock ID`** | **Contains the stock ID selected by the customer** | ### Orders | Field Name | Type | Note | | -------------------- | ------------------------- | --------------------------------------------------------- | | Max Delay | `date` | Indicates the maximum delivery date | | Min Delay | `date` | Indicates the minimum delivery date | | **Order Statut** | **`Order Status`** | **Indicates the current status of the order** | | **Delivery Option** | **`Delivery Option`** | **Contains the delivery option selected by the user** | | **Products** | **`List of Carts`** | **Contains all the details of the shopping cart ordered** | | **Billing Address** | **`Billing Address ID`** | **Contains the billing address selected by the user** | | **Shipping Address** | **`Shipping Address ID`** | **Contains the shipping address selected by the user** | ### Reviews | Field Name | Type | Note | | ----------- | ---------------- | -------------------------------------------- | | Comments | `text` | Contains the comment left by the user | | Rating | `number` | Contains the rating left by the user | | **Product** | **`Product ID`** | **Contains the product that has been rated** | ### Newsletter Subscriptions | Field Name | Type | Note | | ---------- | ------ | --------------------------------------------------------------- | | Email | `text` | Contains the email of the user who subscribed to the newsletter | | Name | `text` | Contains the name of the user who subscribed to the newsletter | ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### Account Type Lists the different account roles available on the platform. | Attributes | Type | Note | | ---------- | ------ | ----------------------------- | | Display | `text` | The label shown for each role | * Client * Admin ### Dashboard Admin Defines the navigation tabs displayed in the admin dashboard. | Attributes | Type | Note | | ----------- | ------- | --------------------------------------- | | Display | `text` | The label shown for each tab | | Icon Grey | `image` | The grey icon associated with the tab | | Icon Purple | `image` | The purple icon associated with the tab | * Dashboard * Products * Stocks * Orders * Users * Reviews * Newsletter ### Dashboard Client Defines the navigation tabs displayed in the client dashboard. | Attributes | Type | Note | | ----------- | ------- | --------------------------------------- | | Display | `text` | The label shown for each tab | | Icon Grey | `image` | The grey icon associated with the tab | | Icon Purple | `image` | The purple icon associated with the tab | * Informations * Orders * Wishlist ### FAQ Stores the questions and answers displayed in the FAQ reusable element. | Attributes | Type | Note | | ---------- | ------ | -------------------------- | | Display | `text` | The question text | | Answer | `text` | The answer to the question | * What countries do you ship to? * What is your return/exchange policy? * How long will it take to get my order? * What payment methods do you accept? * How long does order processing take? * What if my order arrives damaged? ### Orders Status Tracks the current status of an order throughout its lifecycle. | Attributes | Type | Note | | ---------- | ------ | ---------------- | | Display | `text` | The status label | * Active * Cancelled ### Delivery Option Lists the available delivery options with their associated costs and delays. | Attributes | Type | Note | | ---------- | -------- | --------------------------------------- | | Display | `text` | The delivery option label | | Cost | `number` | The cost of the delivery option | | Max Delay | `number` | The maximum number of days for delivery | | Min Delay | `number` | The minimum number of days for delivery | * Free Shipping * Standard * Priority ### Gender Lists the gender filters available for products. | Attributes | Type | Note | | ---------- | ------ | ---------------- | | Display | `text` | The gender label | * Men * Women ### Size Lists the clothing sizes available across products. | Attributes | Type | Note | | ---------- | ------ | -------------- | | Display | `text` | The size label | * XS * S * M * L * XL ### Color Lists the available colors for product stocks. | Attributes | Type | Note | | ---------- | ------ | --------------- | | Display | `text` | The color label | * Purple * Red * White * Black * Blue * Yellow * Orange * Green * Pink * Grey ### Product Type Lists the clothing categories available on the platform. | Attributes | Type | Note | | ---------- | ------ | ---------------------- | | Display | `text` | The product type label | * T-shirt & Polos * Jeans * Hoodies & Sweatshirt * Shirt * Jogging * Short * Coats & Parkas ### Product Page Defines the tabs displayed on the product detail page. | Attributes | Type | Note | | ---------- | ------ | ------------- | | Display | `text` | The tab label | * Description * Reviews ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### Air Copy To Clipboard Free The Air Copy to Clipboard plugin allows users to copy text to the clipboard with a single action. ### Google Material Icons Free Add Google Material Icons to your application and customize their size, color, and appearance. ### Animated Rating Stars Free Add animated star rating input with configurable size, colors, and default value. Supports static and interactive modes, user interaction events, responsive layout, and rating reset actions. ### Chart Element Free Add a chart element to your application. You can display line, bar charts or polar charts. ### Multi-File Uploader - Dropzone Free Allow users to upload multiple files at once using a drag-and-drop interface. Ideal for product image management in the admin dashboard. ### Reveal & Hide Password Free Toggle password visibility in Bubble input fields using a reveal/hide icon. Supports icon size, color, position, default visibility state, multiple inputs, and dynamic control with minimal setup. ### Rich Text Editor Free Enable your users to write rich, formatted text in an input. Compatible with text elements and email. ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Flowbase Source: https://docs.brikl.co/flowbase Beginner Level : Simple templates for new users with little to no Bubble experience. Mockup Saas Landing Page (flowbase) ## Overview Our SaaS Landing Page template is a fully static, single-page template that reproduces the layout and design of a modern SaaS product marketplace. It requires no database setup and is ready to customize out of the box. The page is structured into clearly defined sections that scroll from top to bottom: Navbar : A top navigation bar with a logo, navigation links, and Login / Sign Up action buttons. Hero Section : A large above-the-fold section featuring a bold headline, a descriptive subheadline, a search bar, platform filter tags (Framer, Webflow, Figma), and a set of category shortcut tags. Category Cards : A row of four visual cards presenting the main content categories available on the platform (Components, Wireframes, Illustrations, Boosters), each with a description and browse link. Recent Components : A grid displaying the latest components added to the platform, each with a thumbnail, title, badge, and date. Promotional Banner : A full-width banner section highlighting a featured product or partner, with a headline, description, and CTA button. Trending Section : A grid showcasing the most popular components, with thumbnails, titles, badges, and recent activity dates. Premium Templates : A grid of premium template cards displaying the template name, price, and platform tag. Dark Promotional Banner : A high-contrast dark section promoting an external tool or integration, with a headline and CTA. Illustrations Section : A grid of recent illustration assets available on the platform. CTA Section : A centered call-to-action block with a headline, subheadline, and a primary action button to encourage sign-up or exploration. Blog Section : A row of three recent blog post cards, each with a cover image, title, and short description. Footer : A multi-column footer containing navigation links organized by category, social media icons, and legal mentions. ## Functionalities The template is designed to adapt seamlessly to all screen sizes and devices, ensuring a consistent and optimized experience on desktop, tablet, and mobile. This template is entirely static. There is no database configuration needed, making setup straightforward and the template easy to maintain and deploy. A top navigation bar with a logo on the left, navigation links in the center, and Login / Sign Up buttons on the right. Collapses into a mobile-friendly menu on smaller screens. A full-width above-the-fold section with a headline, subheadline, a search bar, platform logos (Framer, Webflow, Figma), and a row of category shortcut tags to help users navigate quickly. A row of four visual cards presenting the main content categories of the platform, each with a thumbnail, title, short description, and a browse link. A labeled grid section displaying the most recently added components, each presented as a card with a preview thumbnail, title, badge, and publication date. A full-width banner section used to highlight a featured product, partner, or key message. Includes a headline, description text, and a CTA button. A grid showcasing trending components, following the same card format as the Recent Components section. A curated grid of premium template cards, each displaying a preview image, template name, price, and platform tag. A high-contrast dark full-width section promoting an integration or external tool, with a bold headline and a CTA button. A grid of recent illustration assets, presented as visual cards with preview thumbnails. A centered call-to-action block with a headline, a supporting subheadline, and a primary action button encouraging visitors to sign up or explore the platform. A row of three blog post cards, each with a cover image, article title, and a brief description to drive traffic to editorial content. A multi-column footer with navigation links organized by category, social media icons, and legal mentions including copyright information. A clean and contemporary interface built with strong visual hierarchy, generous spacing, and consistent typographic choices to maximize readability and engagement. A clearly organized workflow architecture using logical grouping and visual categorization to improve readability, scalability, and long-term maintainability. ## Pages The main and only page of the template. It contains all sections of the landing page in order: Navbar, Hero, Category Cards, Recent Components, Promotional Banner, Trending Section, Premium Templates, Dark Promotional Banner, Illustrations, CTA Section, Blog Section, and Footer. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### Iconify Free Unofficial Iconify plugin. Add any Icon from [http://iconify.design](http://iconify.design) to your application, change its color, flip it, rotate it, resize it — full customization with minimal setup. ### **Zoom on Hover** Free This plugin adds a zoom effect to elements when users hover over them. ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Herova Source: https://docs.brikl.co/herova Beginner Level : Simple templates for new users with little to no Bubble experience. Mockup Herova ## Overview Herova SaaS Website Template is the ideal solution for SaaS companies looking for a website that is elegant, powerful and easy to manage. With a modern and fully responsive design, this template fits perfectly to mobile screens, tablets and computers, offering an optimal user experience. ## Functionalities Enjoy a fully adaptive design, offering a smooth and optimized experience on all devices (computers, tablets and smartphones). A contemporary, clean and professional design designed to enhance your brand image and offer intuitive navigation. Customize every aspect of the template easily, without coding skills, to adapt it to your specific needs. Create, edit and publish articles to share your news, improve your SEO and engage your audience. Post job offers, manage applications and present your career opportunities in a clear and professional way. Manage your blog posts and job postings via an intuitive admin interface, simplifying updates and content management. ## Pages Home page presenting your SaaS with an overview of features, customer testimonials, pricing plans and a CTA to request a demo. Presents your company’s history, mission and values, as well as the team behind your SaaS. Interface dedicated to administrators to easily manage blog posts and job offers. Page detailing a blog post with title, content, author, date of publication and social sharing. Page listing blog posts in grid form, with a preview of the title, summary and link to read the full article. Presentation of career opportunities with a list of open positions and a CTA to apply for. Contact page with a form to send messages and essential information (address, email, phone). Section dedicated to frequently asked questions with clear answers. Detail of the main features of SaaS, illustrated by clear descriptions and icons. List of applications and services compatible with your SaaS, with an attractive visual presentation. Page detailing a specific position with description, tasks, requirements and a button to apply. Secure page to access the administration interface via a password. Presents the different pricing plans with their associated features and a sign up button. Displays testimonials from satisfied users to strengthen the credibility of your SaaS. Totally personalized error page ## Reusable Elements A collection of shared components built to be used across multiple pages, helping maintain design consistency while making updates and scaling more efficient. A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit. Component listing blog posts with title, summary and link to full reading. CTA inviting visitors to request a demo of the product to discover its functionalities. Dynamic list of the most common questions/answers, organized for easy reading. Footer with essential links (legal notices, contact, social networks, etc.). Header with logo, main navigation and call to action button. Presents the applications compatible with your SaaS, facilitating their discovery and connection. Confirmation window to delete a blog post safely. Confirmation window to remove a job offer from the platform. Displays the features included in each rate plan as a list. Component presenting the different offers, their prices and a registration button. Section dedicated to customer reviews with citation, name and role to build trust. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Datatypes The database consists of different **data types** that you as the developer plan and set up. Data types are like containers that hold specific types of information and each data type is made up of **fields** where that information is stored. ### Blog (Description) | Field Name | Type | Note | | ---------- | ------- | ------------------------------------------------------------------------------- | | category | `text` | Article category to organize the content. | | content | `text` | Main content of the article, including full text with images and formatting. | | subtitle | `text` | Subtitle of the article providing a concise summary or supplement to the title. | | thumbnail | `image` | Preview image used to illustrate the blog page article. | | title | `text` | Main article title, displayed on the blog page and detailed article. | ### Jobs (Description) | Field Name | Type | Note | | -------------------------- | ------------------------ | ------------------------------------------------------------- | | educational\_qualification | `text` | Level of education required for the position. | | experience | `number` | Years of experience required or recommended for the position. | | location | `text` | location of the position | | max\_salary | `number` | Maximum salary proposed for the position. | | min\_salary | `number` | Proposed minimum wage for the position. | | overview | `text` | Brief job and company introduction. | | requirements | `text` | Skills and qualifications required for the position. | | responsibilities | `text` | List of missions and tasks to be performed. | | title | `text` | Job title | | type | `Job Type (Option Sets)` | Type of contract (Option Sets). | | working\_days | `number` | Working days. | ### Password (Description) | Field Name | Type | Note | | ---------- | ---- | ---------------------------------------------------------------- | | password | text | Secure password required to access the administration interface. | ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### Dashboard Admin Option set defining the navigation items available in the admin dashboard sidebar, each associated with a display label and an icon. | Attributes | Type | Note | | ---------- | ------ | ----------------------------------------------------------------------------------- | | Display | `text` | Label displayed in the sidebar navigation for each admin menu item. | | Icon | `text` | Icon name (Iconify format) associated with the menu item for visual identification. | * Home * Create Article * Articles * Create Job * Jobs ### FAQ Option set storing the frequently asked questions and their answers, displayed statically on the FAQ page without requiring a database call. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------ | | Display | `text` | The question text displayed to the user on the FAQ page. | | Answer | `text` | The answer corresponding to the question, shown when the FAQ item is expanded. | * How do I get started with Herova? * Is there a self-help knowledge base available? * How is my data secured on Herova? * What integrations does Herova support? * Can I collaborate with my team on Herova? * Is there a knowledge base available for self-help? ### Job Type Option set defining the available contract types for a job posting, used to categorize and filter job offers. | Attributes | Type | Note | | ---------- | ---- | ------------------------------------------------------------------------------ | | Display | text | Label of the contract type displayed in the job details and job creation form. | * Full-Time * Part-Time * Apprenticeship * Traineeship * Internship ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### Classify Free Classify brings the power of CSS to Bubble.\ This tiny plugins allow editors to add CSS classes to any elements on theirs pages. ### Rich Text Editor Free Enable your users to write rich, formatted text in an input. Compatible with text elements and email ### Iconify Free Unofficial Iconify plugin. Add any Icon from [http://iconify.design](http://iconify.design) to you application, change it's color\*, flip it, rotate it\*, resize it, just do what you want. ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Homeo Source: https://docs.brikl.co/homeo Intermediate level : More complex templates that require Bubble knowledge for some customization. Mockup Homeo ## Overview Check out our e-commerce template for home furniture – a modern solution to launch your own online store. Fully responsive, this template offers dynamic content and a style system to simplify customization. With blog integration, customer account verification and dedicated support, it’s the perfect tool to create an exceptional shopping experience. ## Functionalities Showcase your products in an attractive way and easily change information with simple content management. Manage your store with ease with an intuitive admin dashboard. Control products, orders, and track performance at a glance. Save time in design with a predefined style system. Harmonize the look of your shop effortlessly. Simplify inventory management with an automatic update with each purchase. Avoid out of stock and ensure a smooth shopping experience. Enrich your online store with an integrated blog. Share tips, trends and engage your audience to create a community around your brand. We provide comprehensive documentation to guide you through every aspect of your template. Whether you are a novice or an expert, you will find detailed instructions to make the most of your online store. Enjoy an exceptional user experience, whether for customers browsing your store or for administrators managing the backend. Homeo adapts to all screens, ensuring smooth operation on all devices. I'm here to help. Whether you need to add additional features or are experiencing technical issues, I'm available to support you every step of the way. Ensure security and trust by integrating a customer account verification system. Offer your customers a secure and personalized shopping experience. ## Allow Access This section explains how to unlock the template’s features. The restriction is intentionally in place to prevent users from adding or modifying data in the preview version. This ensures that no sensitive or inappropriate content can be displayed to other people viewing the template in the Bubble Marketplace. In order to access all the features of this template, you will need to purchase it and follow the following steps. Screen Database Access✅ Screen Databse Access2✅ Screen Workflows Access✅ Screen Workflows Access2✅ ## Pages Home page with all products posted, with a newsletter subscription system The page that groups all the products you add to your shopping cart The page that allows you to enter the customer’s information for the validation of his order (Delivery address, billing address and payment) The page that lists all blog posts with a filtering system The page details the specific article with a photo, a description and the author of the article The page where customers can contact you and ask specific questions. The platform administrator receives an email when each form is sent. The page dedicated to platform administrators where they can manage the entire platform (product creation, reduction, order management, user management, etc.) The page dedicated to customers registered on the platform, where they can manage their information, orders and add products as favorites. The page that allows users to log in (client and administrators) The page that details the product with photos, colors and sizes available and a description. The page that allows to find precisely a product thanks to a filtering system. The page that allows users to register for the platform (client and administrators) The page that allows the verification of the email of the users thanks to a code sent by email. The page that allows users to reset their password Totally personalized error page ## Reusable Elements A collection of shared components built to be used across multiple pages, helping maintain design consistency while making updates and scaling more efficient. A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit. This reusable element is located at the top of each page and contains the logo of the model, the different types of products, buttons to connect and register, an input to search for products by name. An icon (Menu) is hidden and appears depending on the size of the page, it contains all the elements mentioned above. This reusable element is located at the bottom of each page and contains links that redirect to different pages such as Contact\_us, Blog\_page, etc. The FAQ is positioned on certain pages such as the Cart so that customers find certain answers to their questions. The Popup Access serves to inform the user who previews the template that some features are limited until the purchase of the template. The Popup Credentials allows the user to change their password and email address. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Datatypes The database consists of different **data types** that you as the developer plan and set up. Data types are like containers that hold specific types of information and each data type is made up of **fields** where that information is stored. ### Access ✅ | Field Name | Type | Note | | ---------- | ------ | -------------------------------------------------------------- | | Access ✅ | yes/no | Whether or not certain features of the template are accessible | ### User | Field Name | Type | Note | | ----------------- | ---------------------------- | ------------------------------------------------------------- | | First Name | `text` | Contains the user’s first name | | Last Name | `text` | Contains the user’s last name | | Phone | `number` | Contains the user’s phone number | | Blog Liked | `List of Blog` | List of Article liked by the user | | Blog Viewed | `List of Blog` | List of Article Viewed by the user | | Account Type | `Account Type (Option Sets)` | Contains the user’s account type | | Verification Code | `text` | Contains the verification code received by the user | | Verified | `yes/no` | Indicates whether the user’s account has been verified or not | | Expiration Code | `date` | Contains the verification period | | Wishlist | `List of Products` | Contains products saved as favorites by the user | ### Shipping Address | Field Name | Type | Note | | ----------------------- | -------- | ------------------------------------------------------------- | | Shipping Country | `text` | Contains the user’s country of shipping | | Shipping Street Address | `text` | Contains the user’s shipping street | | Shipping City | `text` | Contains the user’s shipping city | | Shipping Postal Code | `text` | Contains the user’s shipping postal code | | Shipping First Name | `text` | Contains the first name of the user who receives the delivery | | Shipping Last Name | `text` | Contains the last name of the user receiving the delivery | | Shipping Phone | `number` | Contains the phone number of the user receiving the delivery | ### Billing Address | Field Name | Type | Note | | ---------------------- | ------ | ------------------------------------------------------------ | | Billing Country | `text` | Contains the country of the user’s billing address | | Billing Street Address | `text` | Contains the billing address street | | Billing City | `text` | Contains the city of the user’s billing address | | Billing Postal Code | `text` | Contains the postal code of the user’s billing address | | Billing First Name | `text` | Contains the first name of the user who receives the invoice | | Billing Last Name | `text` | Contains the last name of the user who receives the invoice | ### Product | Field Name | Type | Note | | ---------------- | ------------------------ | -------------------------------------------------------------------------------------------------------- | | Product Name | `text` | Contains the name of the product | | Category | `Category (Option Sets)` | Contains the type of product | | Price | `number` | Contains the initial price of the product | | Description | `text` | Contains the full product description | | Images | `List of Images` | Contains all images of the product | | Measure | `text` | Contains the measure of the product | | Published | `yes/no` | Indicates if the product has been published and is visible to customers | | Discount | `number` | Contains the discount applied on the price | | Quantity | `number` | Contains the product's quantity | | Quantity Updated | `number` | Contains the quantity selected by the user and allows us to subtract it from the quantity of the product | ### Blog | Field Name | Type | Note | | ---------- | ------------------------ | ------------------------------------------------------------------------ | | Article | `text` | Contains the main content of the Article | | Category | `Category (Option Sets)` | Contains the category of this article | | Likes | `number` | Contains the number of likes for this article | | Main Image | `image` | Contains the main image of this article | | Publish | `yes/no` | Indicates if this article has been published and is visible to customers | | Title | `text` | Contains the title of this article | | Views | `number` | Contains the number of views for this article | ### Coupon | Field Name | Type | Note | | ---------- | -------- | ------------------------------------- | | Code | `text` | Contains the coupon code | | Value | `number` | Contains the value of the coupon code | ### Cart | Field Name | Type | Note | | ---------------- | ------------------------------- | --------------------------------------------------------------------- | | Product | `Product ID` | Contains the product place in the shopping cart by the user | | Coupon Code | `text` | Contains the the coupon code used by the user | | Coupon | `number` | Contains the value of the coupon used by the user in percent (%) | | Quantity | `number` | Contains the quantity of the product selected by the user | | Delivery Option | `Delivery Option (Option Sets)` | Contains the delivery option choose by the user | | Discount | `number` | Contains the value of the coupon used by the user formatted in number | | Product Discount | `number` | Contains the value of the product discount formatted in number | | Ordered | `yes/no` | Indicates whether this shopping cart has been ordered or not | | Subtotal | `number` | Contains the total of the shopping cart (excluding other fees) | ### Order | Field Name | Type | Note | | ---------------- | ------------------------------- | ------------------------------------------------------ | | Billing Address | `Billing Address ID` | Contains the billing address selected by the user | | Shipping Address | `Shipping Address ID` | Contains the shipping address selected by the user | | Cart | `List of Carts` | Contains all the details of the shopping cart ordered | | Delivery Option | `Delivery Option (Option Sets)` | Contains the delivery option selected by the user | | Order Status | `Order Status (Option Sets)` | Indicates the status of the order | | Total | `number` | Contains the total amount of the order (fees included) | ### Reviews | Field Name | Type | Note | | ---------- | ------------ | ---------------------------------------- | | Product | `Product ID` | Contains the product that has been rated | | Comments | `text` | Contains the comment left by the user | | Rating | `number` | Contains the note left by the user | ### Newsletter Subscriptions | Field Name | Type | Note | | ---------- | ------ | --------------------------------------------------------------- | | Email | `text` | Contains the email of the user who subscribed to the Newsletter | | Name | `text` | Contains the name of the user who subscribed to the Newsletter | ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### Account Type Defines the account type of a registered user on the platform. Used to differentiate access levels and permissions between customers and administrators. | Attributes | Type | Note | | ---------- | ------ | ---------------------------------------------------------------------- | | Display | `text` | Label displayed to represent the account type (e.g. "Client", "Admin") | * Client * Admin ### Dashboard Admin Lists the navigation sections available in the admin dashboard. Each option corresponds to a menu item allowing the admin to manage a specific part of the platform. | Attributes | Type | Note | | ---------- | ------ | --------------------------------------------------------------- | | Display | `text` | Label displayed in the admin dashboard navigation menu | | Icon | `text` | Name of the Feather Icons icon associated with the menu section | * Dashboard * Products * Blog * Orders * Users * Reviews * Newsletter * Settings ### Dashboard Client Lists the navigation sections available in the client dashboard. Each option corresponds to a menu item allowing the customer to manage their personal information and activity on the platform. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------- | | Display | `text` | Label displayed in the client dashboard navigation menu | * Account * Address * Orders * Wishlist ### FAQ Groups the frequently asked questions displayed to customers, notably on the Cart page. Each option pairs a question with its corresponding answer. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------- | | Display | `text` | Text of the question displayed in the FAQ section | | Answer | `text` | Text of the answer associated with the question | * What countries do you ship to ? * What is your return/exchange policy ? * How long will it take to get my order ? * What payment methods do you accept ? * How long does order processing take ? * What if my order arrives damaged ? ### Order Status Defines the different possible statuses of an order. Used in the admin dashboard to track and update the progress of customer orders. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------------------------- | | Display | `text` | Status label displayed to both the administrator and the customer (e.g. "Completed", "Delivered") | * Completed * Cancelled * Delivered ### Delivery Option Defines the different shipping options offered to the customer during checkout. Each option includes a cost and an estimated delivery time in days. | Attributes | Type | Note | | ---------- | -------- | ------------------------------------------------------------------------------------------------- | | Display | `text` | Label of the delivery option displayed to the customer (e.g. "Free Shipping", "Express Shipping") | | Cost | `number` | Cost of the delivery expressed as a number in the store currency (e.g. 0 for free shipping) | | Max Delay | `number` | Maximum estimated delivery time expressed in number of business days | | Min Delay | `number` | Minimum estimated delivery time expressed in number of business days | * Free Shipping * Standard Shipping * Express Shipping ### Blog Table Defines the navigation tabs in the Blog section of the admin dashboard. Allows the admin to switch between the list of existing articles and the creation of a new one. | Attributes | Type | Note | | ---------- | ------ | --------------------------------------------------------------------------------------- | | Display | `text` | Label of the tab displayed in the blog management interface (e.g. "Articles", "Create") | * Articles * Create ### Credentials Defines the two types of credentials that a user can update from the Credentials Popup in their dashboard. Used to distinguish between updating the email address and updating the password. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------------- | | Display | `text` | Label of the credential field displayed in the update form (e.g. "Email", "Password") | * Email * Password ### Category Defines the product and blog article categories available on the platform. Used to filter and organize products in the shop and articles in the blog. | Attributes | Type | Note | | ---------- | ------ | ---------------------------------------------------------------------------------------------------------------- | | Display | `text` | Label of the category displayed in filters, creation forms, and navigation pages (e.g. "Living Room", "Bedroom") | * Living Room * Bedroom * Bathroom * Dinning * Outdoor * Kitchen ### Product Details Defines the tabs available on the product page, allowing the user to navigate between the full product description and customer reviews left by other buyers. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------ | | Display | `text` | Label of the tab displayed on the product page (e.g. "Description", "Reviews") | * Description * Reviews ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### Feather Icons Free Visual icon elements from the Feather Icons suite ([https://feathericons.com/](https://feathericons.com/)). Customize the color, fill color, and stroke width. Elements should maintain the standard Bubble element properties. ### Animated Rating Stars Free Add animated star rating input with configurable size, colors, and default value. Supports static and interactive modes, user interaction events, responsive layout, and rating reset actions. ### Chart Element Free Add a chart element to your application. You can display line, bar charts or polar charts. ### Reveal & Hide Password Free Toggle password visibility in Bubble input fields using a reveal/hide icon. Supports icon size, color, position, default visibility state, multiple inputs, and dynamic control with minimal setup. ### Multi-File Uploader - Dropzone Free Enables your users to upload more than one file at once. The input returns a list of files. ### Rich Text Editor Free Enable your users to write rich, formatted text in an input. Compatible with text elements and email. ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Installation Source: https://docs.brikl.co/installation The Brikl Chrome Extension integrates directly into the Bubble editor. Follow the steps below to get up and running in under 2 minutes. ## Requirements Before installing, make sure you have the following: * Google Chrome or any Chromium-based browser (Brave, Arc, Edge) * A [Bubble.io](http://Bubble.io) account with at least one active project * A Brikl account - create one for free in the extension ## Step-by-step setup Go to the Chrome Web Store and search for **Brikl**, or use the direct link. Click **Add to Chrome**, then confirm by clicking **Add Extension**. Soon Navigate to [https://bubble.io](https://bubble.io) and open any project. Go to the editor view — the Brikl panel will appear automatically on the right side of the screen. Inside the panel, sign up to Brikl. Your license will be verified automatically. Browse the library, find a component you want, and click **Copy**. Click anywhere on your Bubble canvas and press `Cmd + V` (Mac) or `Ctrl + V` (Windows). The component will appear immediately, fully editable. ## Permissions Brikl only runs on `bubble.io` pages. It does not access any other websites or collect any personal data from your browser. ## Troubleshooting Refresh the Bubble editor page after installing the extension. If the issue persists, click the Brikl icon in your Chrome toolbar to check that the extension is enabled. If `Cmd + V` (Mac) or `Ctrl + V` (Windows) doesn't work, try the following: 1. Right-click anywhere on the Bubble editor canvas. 2. A context menu will appear with several options. 3. Click **Paste** at the position where you want to place the component. The component will be inserted exactly where you right-clicked. Click the Brikl icon in your Chrome toolbar and sign in again with your Brikl credentials. If you still can't log in, contact our support team at [support@brikl.co](mailto:support@brikl.co). 1. Click the **refresh icon** located in the top left corner of the Brikl panel to reload the extension. 2. If no components appear after refreshing, reload the entire Bubble editor page `Cmd + R` on Mac, `Ctrl + R` on Windows). ## Still having issues Reach out to our support at [support@brikl.co](mailto:support@brikl.co) and we'll get back to you as soon as possible. # Layouts Source: https://docs.brikl.co/layouts # Library Source: https://docs.brikl.co/library The Brikl Library gives you access to hundreds of ready-to-use UI components built exclusively with native Bubble elements. Browse by category, copy any component in one click, and paste it directly into your Bubble editor. ## How components work Every component in the library is designed to work immediately after being pasted into your Bubble editor — no database setup, no workflows, no configuration required. Components use self-contained sample data so you can preview and test them instantly. When you're ready, simply replace the sample data with your own data source. All components are built with native Bubble elements. No external plugins or frameworks are required. ## Categories Basic UI building blocks used across any application — buttons, inputs, tables, modals, badges, tabs, tooltips, and more. Components built for landing pages and marketing websites — heroes, pricing sections, testimonials, FAQs, feature sections, and galleries. Everything you need for an online store — product lists, cart interfaces, checkout flows, order summaries, and review sections. Components for SaaS dashboards and web apps — sidebars, metrics, billing sections, team management, settings screens, and profile pages. Components optimized for mobile-first interfaces — bottom sheets, onboarding flows, mobile lists, settings navigation, and profile screens. ## Using a component Open your Bubble editor. The Brikl panel appears automatically on the right side of the screen. Navigate through the categories to find the component you need. Use the search or filters to narrow down your results. Click **Copy** on any component to copy it to your clipboard. Click on your Bubble canvas and press `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click and select **Paste**. The component is now fully editable. Adjust styles, replace sample data with your own data source, and adapt it to your project. ## About sample data Because components are designed to work in any Bubble project, they cannot rely on your database. Instead, each component includes built-in sample data so it renders correctly the moment you paste it. When you're ready to connect real data, simply replace the data source in the repeating group or element with your own Bubble database type. # Metrics Source: https://docs.brikl.co/metrics # Onboardings Source: https://docs.brikl.co/onboardings # Order Histories Source: https://docs.brikl.co/order-histories # Order Summaries Source: https://docs.brikl.co/order-summaries # Plugins Source: https://docs.brikl.co/plugins # Privacy Policy Source: https://docs.brikl.co/privacy-policy Description # Product Lists Source: https://docs.brikl.co/product-lists # Profile Settings Source: https://docs.brikl.co/profile-settings # Refund Policy Source: https://docs.brikl.co/refund-policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## 1. Templates & Plugins This section outlines the refund conditions applicable to templates and plugins sold through the Bubble Marketplace, including eligibility requirements, review procedures, and commission-related adjustments. ### 1.1. General Policy Templates and plugins are distributed and sold exclusively through the [Marketplace of Bubble](https://bubble.io/marketplace). As a result, all transactions, payments, and primary refund handling are governed by [Bubble’s official Marketplace policies and terms](https://manual.bubble.io/account-and-marketplace/marketplace-policies). We do not process payments directly for these products. ### 1.2. Refund Request Process #### 1.2.1. Initial Request Any refund request must first be submitted directly to Bubble through the official Marketplace support system. Bubble is responsible for reviewing and processing refund requests according to their internal policies. #### 1.2.2. Secondary Contact If the request has been reviewed by Bubble and the user wishes to contact us for additional clarification or support, we may review the situation independently. However, this does not guarantee approval outside of Bubble’s final decision. ### 1.3. Eligibility Conditions #### 1.3.1. Usage Condition To be eligible for a refund, the template or plugin must not have been substantially used, modified, deployed to a live environment, or integrated into a production project. Products that have been heavily customized or used in a commercial project may not qualify. #### 1.3.2. Time Limit Refund requests must be submitted within 14 days from the date of purchase. Requests made after this period may not be considered. #### 1.3.3. Compliance with Marketplace Rules All refund requests must comply with Bubble Marketplace policies and any additional requirements they impose. If a request violates Marketplace terms, it may be denied regardless of our internal review. ### 1.4. Refund Amount #### 1.4.1. Commission Deduction If a refund is approved directly by us, the refundable amount will correspond to the net amount we received from the sale. Since Bubble retains a 25% commission, the refunded amount will be equal to 75% of the original purchase price. #### 1.4.2. No Commission Reimbursement We are not responsible for reimbursing the Marketplace commission retained by Bubble. The deducted 25% commission cannot be refunded by us under any circumstances. ### 1.5. Abuse Prevention We reserve the right to decline refund requests in cases of abuse, repeated claims, or evidence of temporary product usage prior to requesting reimbursement. ## 2. Brikl Chrome Extension This section defines the refund terms applicable specifically to the Brikl Chrome Extension, including eligibility requirements, usage conditions, and the independent review process for refund requests. ### 2.1. General Policy The Brikl Chrome Extension is managed and distributed independently. Purchases are not governed by the Bubble Marketplace refund policy. As the provider of this product, we are solely responsible for reviewing and processing refund requests related to the extension. ### 2.2. Refund Request Process #### 2.2.1. Submission All refund requests must be submitted directly through our official support channel and must include proof of purchase along with a clear explanation of the issue encountered. #### 2.2.2. Review Each request is reviewed individually. We reserve the right to request additional information in order to properly assess the situation before issuing a decision. ### 2.3. Eligibility Conditions #### 2.3.1. Time Limit Refund requests must be submitted within 14 days from the date of purchase. #### 2.3.2. Valid Reason Refunds may be granted in cases of reproducible technical malfunction, major compatibility issues, or significant defects that prevent normal use of the extension. #### 2.3.3. Usage Threshold The extension includes a tracking system that records the number of components copied per user. If 50 or more components have been copied and no verified technical issue attributable to our product is identified, the request will not be eligible for a refund. #### 2.3.4. Non-Eligible Cases Refunds will not be granted in cases of change of mind, misunderstanding of product functionality, minor issues that do not affect core performance, or improper use of the extension. ### 2.4. Abuse Prevention We reserve the right to deny refund requests in cases of repeated claims, abusive behavior, or evidence of excessive usage prior to the request. ### 2.5. Final Decision All refund decisions for the Brikl Chrome Extension are made at our sole discretion after review of the request and relevant circumstances. # Reviews Source: https://docs.brikl.co/reviews # Rigdev Source: https://docs.brikl.co/rigdev Beginner Level : Simple templates for new users with little to no Bubble experience. Mockup Saas Landing Page (rigdev) ## Overview Rigdev is a fully static, single-page SaaS landing page template designed for developer tools and Kubernetes infrastructure products. It reproduces the layout and design of a modern, conversion-optimized developer-focused product page. No database setup is required — the template is ready to customize out of the box. The page is structured into clearly defined sections that scroll from top to bottom: **Navbar** : A top navigation bar with a logo on the left, navigation links (Product, Resources, Docs, Pricing) in the center, and a "Support us" CTA button on the right. **Hero Section** : A bold above-the-fold section with a main headline ("The application platform for Kubernetes"), a descriptive subheadline, two CTA buttons (Documentation and Support Us), and a 3D isometric product illustration. Compatibility logos (AWS and others) are displayed below the CTAs. **Problem Statement Section** : A centered section titled "Don't let the complexity of Kubernetes leak into your engineering team," featuring three illustrated cards highlighting core product pillars: Abstract Away K8s Primitives, Proactively Troubleshoot, and Developer Tools. **Developer-Friendly Abstractions Section** : A dark-themed section titled "Developer-Friendly Kubernetes Abstractions" with a label "Convention over Configuration," showcasing UI mockups of the product's interface. Covers Autoscaler and Environment Variables and Config Files features. **Deployment Engine Section** : A dark-themed section titled "Flexible and scalable Deployment Engine" with a "Deployment" label, presenting three feature cards: Builds, Rollouts & Rollbacks, and Integrations, each with a UI preview. **Troubleshooting Section** : A dark-themed section titled "Troubleshooting made simple" with a "Developers" label, highlighting four feature cards: Cluster Insights, Instances, Logging, and Health Checks, each with a dedicated icon. **Team Benefits Section** : A light section titled "A platform to benefit the entire team," with a tab system (Product Teams, DevOps/Platform Teams, Engineering Leaders) presenting three benefit cards per persona: Straight from code to production, Troubleshoot blazingly fast, and Unmatched Developer Experience. **Final CTA Section** : A two-column closing call-to-action block offering two paths: "Schedule a call" and "Try it out yourself," each with its own button. **Community Section** : A dark-themed section titled "Join our Community" with links to Discord and GitHub, alongside a product illustration. **Footer** : A minimal footer with the Rigdev logo, social media icons, a newsletter subscription input, and legal mentions. ## Functionalities The template is designed to adapt seamlessly to all screen sizes and devices, ensuring a consistent and optimized experience on desktop, tablet, and mobile. This template is entirely static. There is no database configuration needed, making setup straightforward and the template easy to maintain and deploy. A top navigation bar with a logo on the left, navigation links (Product, Resources, Docs, Pricing) in the center, and a "Support us" CTA button on the right. Adapts to mobile with a responsive menu. A large above-the-fold section with a bold headline, a descriptive subheadline, two CTA buttons (Documentation and Support Us), and a 3D isometric product illustration. Compatibility logos (AWS and others) are displayed below to reinforce credibility. A centered section with a strong framing headline that highlights the core pain point. Includes three illustrated cards presenting the product's main value pillars: Abstract Away K8s Primitives, Proactively Troubleshoot, and Developer Tools. A dark-themed section presenting key Kubernetes abstractions offered by the product. Includes UI mockups of the interface for Autoscaler (horizontal and vertical), Environment Variables, and Config Files. Features a link to explore the documentation. A dark-themed section highlighting the deployment capabilities of the platform. Presents three feature cards with UI previews: Builds (immutable deployments), Rollouts & Rollbacks, and Integrations with existing cloud tools. A dark-themed section showcasing the platform's developer tooling for diagnosing and managing infrastructure. Includes four icon-based feature cards: Cluster Insights, Instances, Logging, and Health Checks. A light-themed section presenting the product's value across three audience personas via a tab system: Product Teams, DevOps/Platform Teams, and Engineering Leaders. Each tab displays three benefit cards with short descriptions. A two-column closing section offering two distinct conversion paths: scheduling a call with the team, or trying the product directly. Each column includes a short description and a dedicated CTA button. A dark-themed section encouraging users to join the Rigdev community. Includes links to Discord and GitHub, alongside a product illustration to reinforce the brand identity. A minimal footer featuring the brand logo, social media icons, a newsletter subscription field, and legal/copyright mentions. A clean, contemporary interface built with a strong dark/light contrast, a blue and teal accent color palette, 3D isometric illustrations, and consistent typographic choices to convey technical credibility and maximize conversion. ## Pages The main and only page of the template. It contains all sections of the landing page in order: Navbar, Hero, Problem Statement, Developer-Friendly Abstractions, Deployment Engine, Troubleshooting, Team Benefits, Final CTA, Community, and Footer. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### Benefits Tabs Groups the three audience personas displayed in the "A platform to benefit the entire team" section. Each option corresponds to a tab that filters the benefit cards shown to the visitor. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------- | | Display | `text` | Label displayed on the tab in the team benefits section | * Product Teams * DevOps/Platform Teams * Engineering Leaders ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### Iconify Free Unofficial Iconify plugin. Add any Icon from [http://iconify.design](http://iconify.design) to your application, change its color, flip it, rotate it, resize it — full customization with minimal setup. ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Sidebars Source: https://docs.brikl.co/sidebars # Slideout Menus Source: https://docs.brikl.co/slideout-menus # Studio Source: https://docs.brikl.co/studio # Team Management Source: https://docs.brikl.co/team-management # Templates Source: https://docs.brikl.co/templates Brikl Templates are complete Bubble application starters. Each template includes pre-built pages, workflows, a database structure, and UI components — so you can launch your project without building from scratch. ## What's included in a template Every Brikl template comes with everything you need to get started immediately. Data types and fields are already configured to match the application's logic. Core workflows are pre-built and connected to the interface. All pages are designed and structured, ready to be customized. Each template uses Brikl-quality components built with native Bubble elements. ## Template categories * **SaaS** — Dashboards, authentication, billing, and settings screens for web applications. * **Ecommerce** — Product pages, cart, checkout, and order management for online stores. * **Landing Page** — Marketing pages with hero sections, pricing, testimonials, and CTAs. * **Blog** — Content-focused layouts with article pages, author profiles, and category navigation. * **Mobile** — Mobile-first interfaces with bottom navigation, cards, and onboarding flows. ## How to use a template Browse the available templates and purchase the one that fits your project through the Bubble Marketplace. Each template includes its own documentation covering the database structure, workflows, and customization steps. Adapt the template to your brand and business logic, then publish your application. ## Refund policy Templates are sold through the Bubble Marketplace. Refund requests must first be submitted through Bubble. If Bubble is unable to process your refund, you can contact us directly at [support@brikl.co](mailto:support@brikl.co). For more details, see our [Refund Policy](/refund-policy). # Terms of Service Source: https://docs.brikl.co/terms-of-service # Tripago Source: https://docs.brikl.co/tripago Beginner Level : Simple templates for new users with little to no Bubble experience. Mockup Tripago ## Overview Discover a dynamic travel blog template! This template not only offers a space to share your articles, but also smart features. Organize your articles by destination, add interactive photos, write your content while adapting the text style, easily create and modify your content in your dashboard. Totally versatile, perfect for bloggers, portfolios or personal projects, this template is designed to be fully editable. Whether you are a passionate blogger or simply want to integrate a travel section into your application, this template adapts to your needs.\ \ Featuring a sleek and modern design, this template is fully responsive, ensuring an optimal experience on all devices. Take advantage of a dynamic home page to captivate your visitors, dedicated pages to present your articles in detail and an easy-to-use dashboard to manage your content. ## Functionalties This section highlights the core features and capabilities of the application, showcasing how its structure, design, and logic work together to deliver a complete and efficient user experience. The application is designed to adapt seamlessly to all screen sizes and devices, ensuring a consistent and optimized user experience on desktop, tablet, and mobile. A dedicated administrative interface that allows full control over data, users, and key application settings through a centralized management panel. Structured workflows that handle creating, reading, updating, and deleting data efficiently, ensuring reliable and scalable data management. A clean and contemporary interface built with intuitive layouts, balanced spacing, and a strong visual hierarchy to enhance usability and user engagement. Content that updates automatically based on user interactions or database changes, providing a personalized and interactive experience. A responsive support system that ensures quick issue resolution and continuous assistance to maintain smooth application performance. A clearly organized workflow architecture using logical grouping and visual categorization to improve readability, scalability, and long term maintainability. ## Allow Access This section explains how to unlock the template’s features. The restriction is intentionally in place to prevent users from adding or modifying data in the preview version. This ensures that no sensitive or inappropriate content can be displayed to other people viewing the template in the Bubble Marketplace. In order to access all the features of this template, you will need to purchase it and follow the following steps. Screen Database Access✅ Screen Databse Access2✅ Screen Workflows Access✅ Screen Workflows Access2✅ ## Pages This section presents the different pages of the application and their roles, outlining how each screen contributes to the overall structure and user experience. Home page with all articles posted, with a newsletter subscription system The page that details each article with elements from the Article Data Types The page that presents the articles by the category that was selected The page that will allow you to create and modify articles Totally personalized error page ## Reusable Elements A collection of shared components built to be used across multiple pages, helping maintain design consistency while making updates and scaling more efficient. A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit. This reusable element is located at the top of each page and contains the template logo, the different article categories, a Manage Content button which redirects to the Dashboard and a hidden Menu icon which appears depending on the size of the page. This reusable element is located at the bottom of each page and contains the different article categories, a Manage Content button which redirects to the Dashboard and the contact details of the template creator which you can replace with your contact details. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Datatypes The database consists of different **data types** that you as the developer plan and set up. Data types are like containers that hold specific types of information and each data type is made up of **fields** where that information is stored. ### Access | **Field Name** | **Type** | **Note** | | -------------- | -------- | -------------------------------------------------------------- | | ✅ Access | `yes/no` | Whether or not certain features of the template are accessible | ### Article | Field Name | Type | Note | | ----------------- | ------- | ----------------------------------------------------- | | Category | `text` | Contains the article category | | Content | `text` | Contains the content of the article | | Location | `text` | Contains the location of the subject of the article | | Main Picture | `image` | Contains the main image of the article | | Publisher | `text` | Contains the name of the person who wrote the article | | Short Description | `text` | Contains a short description of the item | | Title | `text` | Contains the title of the article | ### Newsletter Subscription | Field Name | Type | Note | | ---------- | ------ | ----------------------------------------------- | | Email | `text` | Contains the email of the person who registered | | Name | `text` | Contains the name of the person who registered | ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### Category This option set defines the different blog article categories available in the application. It ensures consistent classification of content and makes it easier to filter, organize, and display posts dynamically. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------------------------ | | Display | `text` | Display values correspond to the different blog article categories available in the application. | * Discovery * Lifestyle * Family * Sport * Food ### Dashboard This option set defines the different navigation tabs within the admin dashboard. It is used to control internal navigation and manage which section, such as editing or newsletter management, is displayed to the user. | Attributes | Type | Note | | ---------- | ------- | -------------------------------------------------------------------------------------------------------- | | Display | `text` | Display values represent the different navigation tabs used to move between sections of the admin panel. | | Icon Black | `image` | Stores the dark version of the tab icon, used mainly in light mode for proper contrast and clarity. | | Icon White | `image` | Stores the light version of the tab icon, used in dark mode to ensure visibility and visual consistency. | * Edit * Newsletter * Creator ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### AddToAny Share Buttons Free This plugin includes a Share Buttons element for linking to your application’s social media accounts all in the same group. ### Advanced RichText Input Free This is an advanced Rich Text Input based on Bubble's Rich Text Input plugin ### Google Material Icons Free Material design system library is a free library of icons built by Google, using Material Design principles. ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Warpspeed Source: https://docs.brikl.co/warpspeed Advanced Level : High level of Bubble experience and complex design, workflow and data requirements. Mockup Warpspeed ## Overview Optimize your financial management with this all-in-one SaaS billing template, designed to provide freelancers, agencies and small businesses with a complete and professional solution. With a dedicated customer interface, easily track your customers' information, apply specific taxes, and keep all essential data centralized in one place.\ \ Manage your products in an organized way with a customizable product creation feature. Define specific product details, pricing and options, and quickly apply them to your invoices for time-saving and greater accuracy.\ \ Boost your sales with the creation of discount coupons, a powerful feature to retain your customers and boost your promotions. Create custom coupons that you can apply directly to invoices, allowing your customers to take advantage of special discounts in a few clicks.\ \ Finally, this template ensures a smooth and pleasant user experience. With intuitive design and full functionality, you can increase productivity while providing a professional image to your customers. ## Functionalities Add, edit and track your customers' critical information in a dedicated interface. Easily access their data to customize your invoices and ensure smooth management. Create products or services with specific descriptions, custom pricing and options. Keep an organized view and easily apply them to invoices. Generate custom invoices by adjusting the details for each customer, including products, taxes and discounts, to meet their specific needs. Export your invoices to PDF in one click. Ideal for archiving, printing or sending directly to your customers. Create custom coupons to offer discounts to your customers. Apply them directly to invoices to boost your sales or build customer loyalty. Allow multiple users to work on the platform with customized access. Each member can manage his own customers, products and invoices independently. Automatically apply customer-specific taxes when generating invoices, ensuring perfect compliance and accuracy. Enjoy a modern and clean design that simplifies navigation and makes invoice management enjoyable, even for beginners. Keep track of all your transactions thanks to a dashboard that displays the complete history of invoices issued and their status (paid, pending, etc.). ## Pages The home page presents a main button to redirect users to the demo dashboard. This is the starting point to explore features or access your account. This page allows users to log in to their account by entering their credentials (email and password). Automatic redirection to their dashboard is performed after a successful login. The registration page allows new users to create an account. They can enter their information to start using the app and access the dashboard. This is the main page where users manage their customers, products, invoices and coupons. It offers direct access to all the application’s features, all in a clear and intuitive interface. The page that appears when an invalid URL is entered or a page is not found. It offers options to return to the home page or explore other sections of the application. This page allows users to reset their password. ## Reusable Elements A collection of shared components built to be used across multiple pages, helping maintain design consistency while making updates and scaling more efficient. A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit. A reusable item that automatically generates a custom invoice based on the data transmitted. It dynamically adapts to customer information, selected products, taxes and discounts applied. Designed to be easily integrated into any page, this invoice template is both aesthetic and functional, offering a professional rendering ready to be downloaded as a PDF or sent to your customers. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Datatypes The database consists of different **data types** that you as the developer plan and set up. Data types are like containers that hold specific types of information and each data type is made up of **fields** where that information is stored. ### User | Field Name | Type | Note | | ---------- | ----------------------------- | ------------------------------------------------ | | Business | `Business ID` | **Contains the user’s business id** | | Role | `User Role (Option Sets)` | **Determines the user’s role** | | Status | `Member Status (Option Sets)` | **Determines the status of the user** | | Demo | `yes/no` | Determines whether or not this is a demo account | ### Products | Field Name | Type | Note | | ----------- | ------------- | ---------------------------------------------------------------- | | Business | `Business ID` | **Contains the id of the business to which the product belongs** | | Description | `text` | Contains the description of the product | | Name | `text` | Contains the name of the product | | Price | `number` | Contains the price of the product | | Demo | `yes/no` | Determines whether or not this is a demo product | ### Line Item Invoice | Field Name | Type | Note | | ----------- | ------------- | ------------------------------------------------------------------------ | | Business | `Business ID` | **Contains the id of the business to which the item invoice belongs** | | Customer | `Customer ID` | **Contains the id of the customer to whom the invoice item is assigned** | | Invoice | `Invoice ID` | **Contains the invoice id to which the item invoice will be assigned** | | Demo | `yes/no` | Determines whether or not this is a demo item invoice | | Description | `text` | Contains the description of the item invoice | | Name | `text` | Contains the name of the item invoice | | Quantity | `number` | Contains the number of items | | Total | `number` | Contains the sum of the unit price and the number of items | | Unit Price | `number` | Contains the unit price of the item | ### Invoicing Settings | Field Name | Type | Note | | ---------------------- | -------- | --------------------------------------------------- | | Additional Information | `text` | Contains additional billing terms information | | Legal Information | `text` | Contains legal information related to your invoices | | Payment Delay | `number` | Contains payment term in days | ### Invoices | Field Name | Type | Note | | ---------------- | ------------------------------ | ------------------------------------------------------------------- | | Business | `Business ID` | **Contains the id of the business to which the invoice belongs** | | Customer | `Customer ID` | **Contains the id of the customer to whom the invoice is assigned** | | Invoice Status | `Invoice Status (Option Sets)` | **Determines the status of the invoice (draft, pending, paid ...)** | | Invoice Type | `Invoice Type (Option Sets)` | **Determine the type of invoice (canva, demo, official...)** | | Invoice Settings | `Invoice Settings ID` | **Contains the billing parameters id** | | Line Items | `List ofLine Items` | **Contains the list of id items added to this invoice** | | Coupon | `Coupon ID` | **Contains the coupon id applied on this invoice** | | Custom Note | `text` | Contains a custom note for this invoice | | Due Date | `date` | Contains the due date of this invoice | | Emission Date | `date` | Contains the emission date of this invoice | | Number | `number` | Contains the invoice number | | Total | `number` | Contains the final invoice price | ### Coupon | Field Name | Type | Note | | ------------------- | --------------------------- | --------------------------------------------------------------- | | Business | `Business ID` | **Contains the id of the business to which the coupon belongs** | | Coupon Type | `Coupon Type (Option Sets)` | **Determine the type of coupon (fixed amount, percentage)** | | Amount | `number` | Contains the fixed amount of the discount | | Discount | `number` | Contains the percentage of the reduction | | Coupon Used | `number` | Contains the number of times the coupon was used in an invoice | | Description | `text` | Contains the coupon description | | Name | `text` | Contains the coupon name | | Redemption Deadline | `date` | Determines the deadline for the coupon to be used | | Redemption Limit | `number` | Determines the coupon limit that can be used | | Demo | `yes/no` | Determines whether or not this is a demo coupon | ### Customers | Field Name | Type | Note | | -------------------- | ----------------------------- | ----------------------------------------------------------------- | | Business | `Business ID` | **Contains the id of the business to which the customer belongs** | | Currency | `Currency (Option Sets)` | **Contains the currency used by the client** | | Customer Type | `Customer Type (Option Sets)` | **Determines the type of client (individual, company)** | | Language | `Language (Option Sets)` | **Determines the client language** | | Address | `text` | Contains the customer’s address | | Address Line 2 | `text` | Contains the customer's address line 2 | | City | `text` | Contains the customer's city | | Country | `text` | Contains the customer's country | | Custom Payment Delay | `number` | Contains the customer's custom payment delay | | Custom Tax Rate | `number` | Contains the customer's custom tax rate | | Email | `text` | Contains the customer's email | | Legal Name | `text` | Contains the customer's legal name | | Name | `text` | Contains the customer's use name | | Postal Code | `number` | Contains the customer's postal code | | Tax Number | `text` | Contains the customer's tax number | ### Business | Field Name | Type | Note | | ---------------- | ------------------------ | ---------------------------------------------- | | Invoice Settings | `Invoice Settings ID` | **Contains the billing parameters id** | | Currency | `Currency (Option Sets)` | **Contains the currency used by the business** | | Address | `text` | Contains the business’s address | | Address Line 2 | `text` | Contains the business's address line 2 | | City | `text` | Contains the business's city | | Country | `text` | Contains the business's country | | Legal Name | `text` | Contains the business's legal name | | Logo | `file` | Contains the business's logo | | Postal Code | `number` | Contains the business's postal code | | Primary Color | `text` | Contains the business's primary color | | Tax Number | `text` | Contains the business's tax number | | Trade Name | `text` | Contains the business's trade name | ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### App Tab Main navigation tabs displayed in the application's menu. | Attributes | Type | Note | | ---------- | ---- | ----------------------------------------------- | | Display | text | Main navigation tabs displayed in the app menu. | | Icon | text | Visual icon associated with the tab (Iconify). | * Get started * Dashboard * Products * Customers * Invoice * Coupons ### App Settings Settings categories accessible from the configuration panel. | Attributes | Type | Note | | ---------- | ---- | -------------------------------------------------- | | Display | text | Label for the settings section. | | Icon | text | Icon representing the settings category (Iconify). | * Business * Team * Profile * Integrations * Invoicing ### Coupon Type Type of discount applied by a coupon. | Attributes | Type | Note | | ---------- | ---- | --------------------------------------------- | | Display | text | Discount method (fixed amount or percentage). | * Fixed Amount * Percentage ### Currency Supported currencies used for pricing and billing. | Attributes | Type | Note | | ---------- | ---- | ----------------------------------- | | Display | text | ISO currency code (EUR, CHF, USD…). | * EUR * USD * JPY * GBP * AUD * CAD * CHF ### Customer Type Classifies customers to adapt billing and communication. | Attributes | Type | Note | | ---------- | ---- | ----------------------------------------------------- | | Display | text | Legal nature of the customer (company or individual). | * Company * Individual ### Invoice Status Tracks the lifecycle stage of an invoice, with visual badge styling. | Attributes | Type | Note | | ---------------- | ---- | ------------------------------------------------------------- | | Display | text | Current state of the invoice (Draft, Pending, Paid, Deleted). | | Color | text | Badge text color (HEX). | | Border Color | text | Badge border color (HEX). | | Background Color | text | Badge background fill color (HEX). | * Draft * Pending * Paid * Deleted ### Invoice Type Categorizes invoices by their purpose. | Attributes | Type | Note | | ---------- | ---- | ----------------------------------------- | | Display | text | Invoice category (Canva, Demo, Official). | * Canva * Demo * Official ### Language Languages available for localization and user preferences. | Attributes | Type | Note | | ---------- | ---- | ----------------------------- | | Display | text | Human-readable language name. | * French * English * Spanish * Italian * German ### Member Status Activation state of a team member on the platform, with badge styling. | Attributes | Type | Note | | ---------------- | ---- | ------------------------------------------- | | Display | text | Current membership state (Pending, Active). | | Background Color | text | Badge background fill color (HEX). | | Color | text | Badge text color (HEX). | | Border Color | text | Badge border color (HEX). | * Pending * Active ### Period Time intervals used for reporting and filtering. | Attributes | Type | Note | | ---------- | ---- | ------------------------------------------ | | Display | text | Time granularity (Year, Month, Week, Day). | * Year * Month * Week * Day ### User Role Permission level and responsibilities assigned to each user. | Attributes | Type | Note | | ----------- | ---- | --------------------------------------------------- | | Display | text | Name of the assigned role (Account Manager, Admin…) | | Description | text | Description of the assigned role | * Account Manager * Admin ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### **Air Color Picker** Free The Air Color Picker plugin provides an intuitive interface for users to select colors. ### **Air Date Time Picker** Free A customizable date and time picker that lets users select values in one input. Supports min/max limits, flexible formats, styling options, and smooth date selection directly inside Bubble apps. ### Iconify Free Unofficial Iconify plugin. Add any Icon from [http://iconify.design](http://iconify.design) to you application, change it's color\*, flip it, rotate it\*, resize it, just do what you want. ### **PDF & Screenshot Pro** Free Generate PDF FIles and Screenshots. ### Toolbox Free Javascript and utility elements: List of Numbers, Expression, Javascript to Bubble, List Item Expression, Run javascript (workflow action), Server script (server workflow action). ### Tooltips Free Simple, beautiful tooltips that can be attached to any element on your page. Great for onboarding, guides, tips and more! ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Welcome Source: https://docs.brikl.co/welcome Brikl is the fastest way to build beautiful interfaces in Bubble. Browse hundreds of ready-to-use UI components and paste them directly into your editor — no setup required. ## What is Brikl ? Building consistent interfaces in Bubble takes time. Brikl solves that by giving you a complete library of pre-built UI blocks, all made with native Bubble elements, all ready to use instantly. Whether you're building a SaaS dashboard, a marketing landing page, or an e-commerce store, Brikl has the components you need to ship faster. ## What's inside Full Bubble application starters with pages, workflows, and database structure already set up. Bubble plugins to extend your app's functionality. Coming soon. A dedicated design environment for Bubble. Coming soon. ## How it works Add Brikl to Chrome from the Web Store. It integrates directly into the Bubble editor. Navigate to any page in your Bubble editor. The Brikl panel appears automatically. Find the component you need, click Copy, and paste it into your editor. All components are native Bubble elements — edit them just like anything else in your project. ## Who is Brikl for ? Brikl is designed for anyone building on Bubble who wants to move faster without sacrificing design quality. ### Bubble developers Build consistent, scalable interfaces without starting from scratch every time. ### No-code founders Launch your product faster by skipping the UI design phase entirely. ### Indie makers Ship SaaS apps, marketplaces, and tools with a professional look from day one. ### Agencies Deliver Bubble projects to clients faster with a reliable, ready-to-use component system. # Workhive Source: https://docs.brikl.co/workhive Intermediate Level : More complex templates that require Bubble knowledge for some customization. Mockup Workhive ## Overview Built for developers and teams who want to skip the boilerplate and focus on what makes their app unique. This template delivers a complete mobile app foundation: a sleek, modern UI that feels native and professional, a well-organized database structure ready to grow with you, and a fully functional app, not just static screens. It also includes a smooth onboarding process that guides your users from first open to their first key action, thorough documentation so you can customize everything with confidence, and reactive support whenever you need a hand. Whether you're shipping an MVP or building the foundation for something bigger, this template gives you a serious head start. ## Functionalities Complete authentication system with email and social login, password recovery, and session management built right in. A well-thought-out database schema that keeps your data clean, consistent, and ready to scale as your user base grows. A sleek, intuitive interface designed with attention to detail, delivering a smooth and professional native experience on every screen. Powerful search and filtering tools that let users quickly find exactly what they're looking for, no matter how much content you have. A fully built settings screen where users can manage their profile, update preferences, and control notifications with ease. A dedicated support team that responds quickly and helps you solve issues so you can keep building without losing momentum. ## Views The first screen users see when opening the app. Displays the logo on a vibrant green background with a smooth loading animation lasting three seconds before transitioning to the next screen. A simple input screen where users can write a short bio or description about themselves, helping build a more complete and personalized profile. An informational screen that gathers all important links in one place, including terms of use, the official website, social media accounts, and other relevant resources. The main settings hub where users can navigate to key sections like their profile, payment account, support center, and other account-related options. A dedicated security screen where users can update their password, enable or disable Face ID, and manage other authentication preferences to keep their account safe. A structured application form that lets users submit their candidacy for a job offer, with all the required fields to complete the process smoothly. A confirmation screen displayed after a job application has been successfully submitted, reassuring the user that everything went through. A detailed company view showing all relevant information about a business, including its description, industry, location, and any other available details. A form screen where users can add their educational background, including degrees, institutions, and graduation dates, to strengthen their profile. A dedicated list of all job offers the user has saved as favorites, making it easy to revisit and compare opportunities at any time. A recovery screen where users can enter the email associated with their account to receive a password reset link and regain access. The welcome screen presented to new users, featuring clear action buttons to sign up, log in, or explore other entry points into the app. The main screen of the app, serving as the central hub where users can browse featured job offers, explore categories, and access key features at a glance. A complete overview of all the user's submitted applications, organized by status such as pending, under verification, accepted, and more for easy tracking. A full detail view of a specific job offer, displaying all relevant information including role description, requirements, salary, location, and company details. A settings screen where users can choose their preferred language for the entire app, with a clear list of all available options. The sign-in screen where returning users can enter their credentials to securely access their account and pick up where they left off. The first step of the onboarding experience, introducing users to a key feature or concept of the app through a clear and engaging visual explanation. The second onboarding step, continuing to walk users through the app's core value and how it can help them in their job search journey. The final onboarding step, wrapping up the introduction and encouraging users to get started with the app right away. A screen where users can connect and manage their preferred payment providers such as PayPal, Apple Pay, and Google Pay for a seamless payment experience. A form that allows users to update their personal information including name, phone number, address, and other key details tied to their profile. A dedicated screen displaying the full privacy policy of the app, ensuring transparency about how user data is collected, used, and protected. The user's complete profile page, showcasing their photo, personal data, education, bio, and all other information they've added throughout the app. A settings screen where users can customize their notification preferences, choosing which alerts they want to receive and which ones to mute. The account creation screen where new users can sign up by entering their details and setting up their credentials to start using the app. A secure form where users can set a new password after requesting a reset, helping them regain full access to their account. A search screen that lets users look up companies by name, making it easy to find and explore specific businesses and their available job offers. A powerful search screen where users can find job offers by name and refine results using multiple filters like location, category, salary range, and more. The first step of the account setup process after registration, asking users to select their country from a comprehensive list to personalize their experience. The second setup step, where users choose their professional field from a wide range of options such as IT, Sales, Marketing, Design, and many more. The final setup step, presenting a form where users fill in their personal data to complete their profile and get the most relevant job recommendations. A help section featuring a list of frequently asked questions, giving users quick answers to common issues without needing to contact support directly. ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Datatypes The database consists of different **data types** that you as the developer plan and set up. Data types are like containers that hold specific types of information and each data type is made up of **fields** where that information is stored. ### Application | Field Name | Type | Note | | ------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | cover\_letter\_text | `text` | The text content of the applicant's cover letter submitted with the application. | | email | `text` | The email address provided by the applicant for this specific application. | | first\_name | `text` | The applicant's first name as entered in the application form. | | job | `Job` | A reference to the Job entry this application is linked to. | | last\_name | `text` | The applicant's last name as entered in the application form. | | phone\_number | `number` | The phone number provided by the applicant for contact purposes. | | resume | `file` | The uploaded resume or CV file attached to the application. | | status | `Application Status (Option Sets)` | The current status of the application, based on the Application Status option set (e.g. Pending, Review, Accepted). | ### Company | Field Name | Type | Note | | ------------ | ---------------- | ----------------------------------------------------------------------------- | | description | `text` | A text description of the company, its activity, and its mission. | | gallery | `List of images` | A list of images showcasing the company's offices, team, or work environment. | | location | `text` | The main geographical location or headquarters of the company. | | logo | `image` | The company's logo displayed across the app. | | name | `text` | The official name of the company. | | website\_url | `text` | The URL of the company's official website. | ### Company Benefits | Field Name | Type | Note | | ---------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | | benefits | `List of texts` | A list of text entries describing individual benefits offered by the company (e.g. remote work, health insurance). | | company | `Company` | A reference to the Company this set of benefits belongs to. | | title | `text` | The title or category label for this group of benefits (e.g. Health, Work-Life Balance). | ### Job | Field Name | Type | Note | | ------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------- | | additional\_informations | `text` | Any extra details about the job not covered by other fields. | | address | `text` | The physical or remote location where the job is based. | | category | `Job Category (Option Sets)` | The professional category of the job, based on the Job Category option set (e.g. IT, Marketing, Sales). | | company | `Company` | A reference to the Company that posted this job offer. | | contract | `Contract Type (Option Sets)` | The type of contract offered, based on the Contract Type option set (e.g. Full Time, Freelance). | | description | `text` | A detailed text describing the role, responsibilities, and expectations. | | level | `Experience Level (Option Sets)` | The required experience level for the position, based on the Experience Level option set (e.g. Junior, Senior). | | max\_salary | `number` | The upper limit of the salary range offered for this position. | | min\_salary | `number` | The lower limit of the salary range offered for this position. | | qualifications | `List of texts` | A list of required or preferred qualifications for the role. | | title | `text` | The job title displayed in listings and detail views (e.g. Product Designer, Backend Developer). | ### User | Field Name | Type | Note | | ------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------ | | about\_me | `text` | A short bio or personal description written by the user. | | address | `text` | The user's current residential address. | | biometric\_id | `yes/no` | Indicates whether the user has enabled biometric authentication (e.g. fingerprint). | | country | `text` | The country the user selected during the account setup process. | | date\_of\_birth | `date` | The user's date of birth, used for profile completion. | | expertise | `List of Job Categorys (Option Sets)` | A list of professional fields the user identifies with, based on the Job Category option set. | | face\_id | `yes/no` | Indicates whether the user has enabled Face ID authentication. | | favorite\_jobs | `List of Jobs` | A list of Job entries the user has saved as favorites for quick access. | | first\_name | `text` | The user's first name as entered during registration or profile setup. | | gender | `Gender (Option Sets)` | The user's gender, based on the Gender option set. | | language | `Languages (Option Sets)` | The user's preferred app language, based on the Languages option set. | | last\_name | `text` | The user's last name as entered during registration or profile setup. | | phone\_number | `number` | The user's phone number for contact and profile purposes. | | profile\_picture | `image` | The user's uploaded profile photo displayed across the app. | | push\_notifications | `List of Push Notifications (Option Sets)` | A list of notification categories the user has opted into, based on the Push Notifications option set. | | remember\_me | `yes/no` | Indicates whether the user chose to stay logged in between sessions. | | role | `Role (Option Sets)` | The user's role within the app, based on the Role option set (e.g. Applicant, Company, Admin). | | email | `text` | The user's email address used for authentication and communication. | ### User Education | Field Name | Type | Note | | ---------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- | | department | `Job Category (Option Sets)` | The field of study or department, based on the Job Category option set. | | description | `text` | A short description of the program, coursework, or achievements during this education. | | end\_of\_study | `date` | The date the user completed or expects to complete this education. | | level | `Education Level (Option Sets)` | The academic level of the degree, based on the Education Level option set (e.g. Bachelor, Master). | | location | `text` | The city or country where the institution is located. | | school\_name | `text` | The name of the school, university, or institution attended. | | start\_of\_study | `date` | The date the user began this education. | | status | `Education Status (Option Sets)` | The current status of the education, based on the Education Status option set (e.g. Finished, Pending). | ### User Work Experience | Field Name | Type | Note | | ---------------- | ----------------------------- | ------------------------------------------------------------------------------ | | company\_name | `text` | The name of the company where the user worked. | | contract\_type | `Contract Type (Option Sets)` | The type of contract for this position, based on the Contract Type option set. | | field\_of\_work | `text` | The general industry or field related to this work experience. | | job\_description | `text` | A text describing the user's responsibilities and achievements in this role. | | job\_name | `text` | The job title held by the user at this company. | ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### Applications Status A predefined set of statuses used to track the progress of a job application throughout the hiring process, from submission to final decision. | Attributes | Type | Note | | ---------------- | ------ | -------------------------------------------------------------------------------------------------------------------------- | | Background Color | `text` | The background color code used to visually distinguish this status in the UI (e.g. a soft colored badge behind the label). | | Main Color | `text` | The primary color code used for the status label text or icon, ensuring clear visual contrast with the background. | | Display | `text` | The human-readable label shown to the user in the interface (e.g. "Pending", "Accepted"). | * Pending * Review * Interview * Accepted * Rejected ### Contract Type A list of employment contract formats used to classify job offers by their working arrangement and duration. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------------------- | | Display | `text` | The human-readable label shown in job listings and filters (e.g. "Full Time", "Freelance"). | * Full Time * Part Time * Internship * Temporary * Seasonal * Freelance ### Education Level A set of academic degree levels used to classify the user's educational background on their profile. | Attributes | Type | Note | | ---------- | ------ | ----------------------------------------------------------------------------------- | | Display | `text` | The human-readable label representing the degree level (e.g. "Bachelor", "Master"). | * High School * Associate * Bachelor * Master * Doctorate ### Education Status A set of statuses indicating the current state of a user's education entry, whether completed, ongoing, or stopped. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------------------ | | Display | `text` | The human-readable label shown on the user's education entry (e.g. "Finished", "Pending"). | * Pending * Finished * Discontinued ### Experience Level A set of seniority levels used to define the professional experience required for a job offer. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------------- | | Display | `text` | The human-readable label shown in job listings and filters (e.g. "Junior", "Senior"). | * Junior * Senior * Lead * Manager ### Gender A set of gender options available for the user to select when completing their personal profile. | Attributes | Type | Note | | ---------- | ------ | --------------------------------------------------------------------------- | | Display | `text` | The human-readable label shown in the profile form (e.g. "Male", "Female"). | * Male * Female ### Job Category A comprehensive list of professional fields used to classify job offers and define user expertise areas throughout the app. | Attributes | Type | Note | | ---------- | ------ | ---------------------------------------------------------------------------------------------------- | | Display | `text` | The human-readable label shown in job listings, filters, and profile setup (e.g. "IT", "Marketing"). | * Accounting * Designer * Legal * Finance * Sales * Engineering * Architecture * Consultancy * Management * Customer Service * Public Service * IT * Writing * Security * Marketing * Programmer ### Languages A list of supported languages the user can choose from to set their preferred language for the entire app interface. | Attributes | Type | Note | | ---------- | ------ | ----------------------------------------------------------------------------------- | | Display | `text` | The human-readable label representing the language name (e.g. "English", "French"). | * English * Spanish * French * Portuguese * Arabic * German * Chinese * Japanese * Italian * Russian * Turkish ### Location A list of countries used during the account setup process, allowing users to select their country of origin or residence. | Attributes | Type | Note | | ---------- | ------- | ----------------------------------------------------------------------------------- | | Flag | `image` | The country's flag icon displayed alongside the country name in the selection list. | | Display | `text` | The human-readable label representing the country name (e.g. "France", "Japan"). | * Spain * France * United States * United Kingdom * Japan * Brazil * China * Germany * Italy * Canada * South Africa * India * Denmark * Portugal ### Push Notifications A set of notification categories that users can individually enable or disable to control what alerts they receive from the app. | Attributes | Type | Note | | ---------- | ------ | ---------------------------------------------------------------------------------------------------- | | Display | `text` | The human-readable label shown in the notification settings screen (e.g. "Payments", "App Updates"). | * Notifications * Payments * Sound * Vibrate * Special Offers * Cashback * App Updates ### Role A set of user roles used to define access levels and permissions within the app, determining what each user can see and do. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------------------- | | Display | `text` | The human-readable label representing the role type (e.g. "Applicant", "Company", "Admin"). | * Applicant * Company * Admin ### Support Center A predefined list of frequently asked questions and their answers, displayed in the support section to help users find quick solutions. | Attributes | Type | Note | | ---------- | ------ | ------------------------------------------------------------------------------------------ | | Answer | `text` | The detailed answer or explanation provided in response to the corresponding question. | | Display | `text` | The question text displayed to the user in the FAQ list (e.g. "Is the application free?"). | * What is this application? * Is the application free? * Are my personal data protected? * How can I change my personal information? * I encounter a bug, what to do? ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/) # Writeology Source: https://docs.brikl.co/writeology Beginner Level : Simple templates for new users with little to no Bubble experience. Mockup Writeology ## Overview Our personal blog template is the perfect solution for those who want to share their passion, thoughts or expertise with the world. Carefully designed, it incorporates essential features for easy management and an excellent user experience : Admin Dashboard : An intuitive dashboard lets you easily manage your content, settings, and user interactions. Everything is at hand for a smooth management of your blog. Responsive Design : This template adapts perfectly to all devices, ensuring an optimal user experience for your visitors to use a desktop, tablet or smartphone. Support & Documentation : Access responsive support and comprehensive documentation that will guide you through all the features of the template, helping you troubleshoot and optimize your blog usage. This personal blog template is more than just a blogging platform; it’s a powerful tool to connect with your audience and share your vision effectively. ## Functionalties The application is designed to adapt seamlessly to all screen sizes and devices, ensuring a consistent and optimized user experience on desktop, tablet, and mobile. A dedicated administrative interface that allows full control over data, users, and key application settings through a centralized management panel. Structured workflows that handle creating, reading, updating, and deleting data efficiently, ensuring reliable and scalable data management. A clean and contemporary interface built with intuitive layouts, balanced spacing, and a strong visual hierarchy to enhance usability and user engagement. Content that updates automatically based on user interactions or database changes, providing a personalized and interactive experience. A responsive support system that ensures quick issue resolution and continuous assistance to maintain smooth application performance. A clearly organized workflow architecture using logical grouping and visual categorization to improve readability, scalability, and long term maintainability. ## Pages The page that details each article with elements from the Article Data Types The page that presents the articles by the category that was selected The page that presents the articles by the key word that was selected The page that allow the users to contact you The page that will allow you to create and modify articles Totally personalized error page ## Reusable Elements A collection of shared components built to be used across multiple pages, helping maintain design consistency while making updates and scaling more efficient. A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit. This reusable element is located at the top of each page and contains the template logo, the different article categories, a contact button to redirect the users on the contact page, a home button to allow the users to go back to the the home page and a hidden Menu icon which appears depending on the size of the page. This reusable element is located at the bottom of each page and contains the newsletter subscription system ## Workflows This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application. In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions. ### Folders Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain. This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling. This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow. This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized. This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data. This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database. Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database. This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance. This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes. ### Colors Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure. Blue is used for workflows involving navigation, such as redirects to other pages or links. Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system. Red indicates workflows that have an impact on deleting data or resetting values. Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements. This color is reserved for elements related to APIs and Plugins. The Cyan color indicates specific interactions triggered by custom events or custom states. Brown is use for email send ## Datatypes The database consists of different **data types** that you as the developer plan and set up. Data types are like containers that hold specific types of information and each data type is made up of **fields** where that information is stored. ### User | Field Name | Type | Note | | ---------- | ------- | ---------------------------------------------------- | | First Name | `text` | Contains the first name of the user who is logged in | | Last Name | `text` | Contains the name of the user who is logged in | | Photo | `image` | Contains the photo of the user who is logged in | ### Article | Field Name | Type | Note | | ---------- | ------------ | -------------------------------------- | | Category | `Categories` | Contains the category of the article | | Content | `text` | Contains the content of the article | | Thumbnail | `image` | Contains the main image of the article | | Title | `text` | Contains the title of the article | ### Newsletter Subscription | Field Name | Type | Note | | ---------- | ------ | ----------------------------------------------- | | Email | `text` | Contains the email of the person who registered | | Name | `text` | Contains the name of the person who registered | ## Option Sets This section covers option sets, used to store a static list of options in a database-like structure Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated. ### Category This option set defines the different blog article categories available in the application. It ensures consistent classification of content and makes it easier to filter, organize, and display posts dynamically. | Attributes | Type | Note | | ---------- | ---- | ------------------------------------------------------------------------------------------------ | | Display | text | Display values correspond to the different blog article categories available in the application. | * Tips * Resources * Guides ### Dashboard Admin This option set defines the different navigation tabs within the admin dashboard. It is used to control internal navigation and manage which section, such as editing or newsletter management, is displayed to the user. | Attributes | Type | Note | | ---------- | ---- | ------------------------------------------------------------------------------------------------ | | Display | text | Display values correspond to the different blog article categories available in the application. | * Account * Create Article * Articles * Newsletter ## Plugins An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities. You might need to install these plugins when using the template. ### Iconify Free Unofficial Iconify plugin. Add any Icon from [http://iconify.design](http://iconify.design) to you application, change it's color\*, flip it, rotate it\*, resize it, just do what you want. ### Reveal & Hide Password Free Toggle password visibility in Bubble input fields using a reveal/hide icon. Supports icon size, color, position, default visibility state, multiple inputs, and dynamic control with minimal setup. ### Rich Text Editor Free Enable your users to write rich, formatted text in an input. Compatible with text elements and email. ## Refund Policy This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each. ## Support Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems. [support@brikl.co](mailto:support@brikl.co) [https://www.brikl.co/](https://www.brikl.co/)