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
Open the Brikl panel
Navigate to the Marketings category in the Brikl panel.
Copy the component
Find Contact 02 and click Copy.
Paste into your editor
Paste it into your Bubble canvas with Cmd + V (Mac) or Ctrl + V (Windows),
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 |
| Platform | Supported |
|---|
| Web | ✅ |
| Mobile | ❌ |
License
This component requires a Starter plan.
