Studio Nope - Integrations

A premium integration directory module that displays your app ecosystem in a searchable, filterable grid. Integration Showcase Pro gives you three layout modes, category tabs, live search, detail modals with rich text content, and complete style control from the module editor.

Add integrations via the repeater field with a logo, name, category, short description, rich text detail content for the modal, link, optional badge, and a featured toggle to pin entries to the top. Choose grid, list, or compact layout. Enable search and category filter tabs so visitors can browse your ecosystem instantly. Configure how cards behave on click: open a detail modal, navigate to a link, or no action.

Every element is fully customizable from the Style tab. 87 style fields control card backgrounds, borders, shadows, hover effects, logo sizing and borders, arrow button size and shape, badge appearance, toolbar styling, modal design including button colors, padding, radius, and shadow, typography with two Google Font pickers, Load More button styling, spacing, and responsive breakpoints. Section backgrounds span full width with centered content containers. Nothing is hardcoded.

What you can build:

• Monochrome integration directories with collapsed-border table grids, zero gap, square corners, and Geist font

• SaaS app directories with rounded shadow cards, blue filter pills, and "Learn more" text links

• Creative tool showcases in horizontal list layout with large logos, search bar, and arrow buttons

• Developer platform pages on dark backgrounds with wide 2-column cards, purple accents, and square arrow buttons

• Enterprise partner grids in compact layout with small logos, gold filter tabs on dark navy, and subtle card backgrounds

Content features include a repeater supporting up to 200 integration entries. Each entry has a logo image with auto-generated initial placeholder when no image is provided, name, category for filtering, short card description, rich text detail description for the modal with headings and lists, external link, optional badge label (Popular, New, Premium, or custom text), and a featured toggle that pins entries first. Categories are managed as a separate repeater with labels and slugs so you control filter tab order and naming independently.

Grid layout displays cards in 2, 3, or 4 columns with center or left alignment. List layout renders horizontal cards with logo on the left and content flowing right in a single column.

Compact layout shows logo and name only in a tight multi-column grid with no descriptions. All three layouts wrap responsively on tablet and mobile with configurable breakpoints.

Cards support three click behaviors: open a detail modal, navigate directly to the integration link, or no action. Two card action styles are available: a text link with sliding arrow, or a round or square arrow button with configurable size, shape, and alignment. The detail modal displays the integration logo at a configurable size, name with badge, full rich text content with styled headings and lists, and a button linking to the integration. The modal includes backdrop overlay, scale-in animation, body scroll lock, Escape key to close, backdrop click to close, and keyboard focus management.

Search filters by name, description, and category with debounced input. Category tabs managed via a separate repeater filter the grid instantly. Both work together and toggle independently. An optional count display shows how many integrations are currently visible. Load More pagination with configurable initial count, button radius, padding, and font size.

The Style tab organizes 87 fields into clear groups. Colors covers 35 fields for section background, card styling with separate background, border, and hover colors, all text elements, search input appearance, filter pill states, badges, count display, modal background, overlay, title, text, border, content headings, content lists, modal button with background, text, and hover colors, CTA link colors, and Load More button. Typography includes two Google Font pickers with theme inheritance plus 12 individual size controls. Card styling covers border radius, padding, gap, shadow with four levels, hover shadow, logo size, logo radius, logo border color, arrow button size, card content gap, and Load More button radius, padding, and font size. Toolbar covers search and filter pill dimensions and gaps. Badge covers radius and padding. Modal covers radius, padding, width, shadow, logo size, and button font size, padding, radius, and shadow. Spacing and responsive breakpoints complete the system.

Zero external dependencies, vanilla JavaScript only. All CSS scoped per instance for multiple modules on the same page. Semantic HTML, ARIA attributes on interactive elements, keyboard navigation for cards and modal, focus trap when modal is open. Filter tabs wrap responsively. Works on any HubSpot template with no theme required.