How to expand to complex components like cards and modals in Bubble.io: Step-by-

Create a Group element with Column layout, white background, 1px border (using your border color variable), 12px border-radius, and 0px padding. Inside, add: an Image element at the top (set to cover mode, fixed height like 200px, full width), then a Group with 20px padding containing a Text element for the title (18px bold), a Text for description (14px, 2-line clamp using max-height and overflow hidden), and a Group with Row layout for metadata (date, category badge, etc.). Save this Group as an Element Style called 'Card' so you can reuse the styling on any similar group throughout your app.

Add a Repeating Group with Row layout and set the number of columns (3 for desktop). Set the type of content to your Data Type and configure the data source. In the first cell, build or paste your card structure. Bind each element to the current cell's data: Image source = Current cell's image field, title Text = Current cell's title, description Text = Current cell's description. Add the 'Card' style to the outer Group. Set row-gap and column-gap to 24px for consistent spacing. Make the RG responsive by enabling row wrapping so cards stack on smaller screens.

Add a Popup element to the page (found in the Element Palette under Containers). Name it 'Popup Form'. Set it to not visible on page load. Inside, add a Group with Column layout and max-width of 500px. Add a header Group with Row layout containing a title Text and a close button (X icon). Below, add your form elements: Inputs, Dropdowns, Multiline Inputs as needed. Add Save and Cancel buttons at the bottom. The Cancel button workflow hides the popup. The Save button workflow creates or updates a record, then hides the popup. Bubble automatically adds a semi-transparent overlay behind popups.

Add another Popup called 'Popup Detail'. Set its type of content to your Data Type. Inside, build a full detail view: large Image, title, full description (no line clamping), metadata, and action buttons (Edit, Delete, Share). To open this popup from a card click, add a workflow on the card Group: when clicked, Display data in 'Popup Detail' (sending the current cell's data) and then Show 'Popup Detail'. The popup receives the data and all its elements dynamically display the selected record's fields. Add an Edit button that opens 'Popup Form' pre-filled with the record's data.

For communication between cards and popups, use two patterns. Pattern 1 (Display data): when showing a popup, use 'Display data in a group' to send the selected record to the popup. The popup's elements reference 'Parent group's [Data Type]' to access the data. Pattern 2 (Custom states): create a custom state on the page called selected_item (type: your Data Type). When a card is clicked, set the state to the current cell's data. The popup reads from the page's state. This pattern is useful when multiple components need to react to the same selection.

Convert your card and modal patterns into reusable elements for use across multiple pages. Select the card Group, right-click, and choose 'Convert to reusable element' (or create a new reusable element and rebuild the structure). For the modal popup, create a reusable element of type Popup. Add custom properties to pass configuration data: title text, button labels, form fields to show. Place these reusable elements on any page. When the card needs to communicate with the popup, use custom states on the reusable elements that the parent page can read.