--- title: Feature Grid Pro — Feature Sections & Bento Grids for HubSpot description: Versatile feature grid module for HubSpot. Card grid, bento, alternating rows, and icon list layouts with icons or images, scroll animations, and full style control. --- # Feature Grid Pro for HubSpot Four layout modes, icon or image visuals, bento highlights, scroll animations, and complete style control. Build any feature section from the editor. Demo 1 — Card Grid, 3 Columns, Zero Gap ## Monochrome Directory Collapsed-border table look. 3 columns, zero gap, zero radius, no shadow. Geist font, monochrome palette, left-aligned. Compact type with 16px titles and 13px descriptions. --- ## Platform Features ### Instant Deploys Push to production in under 30 seconds with zero-downtime rolling deployments and automatic rollback. ### SOC 2 Compliance Enterprise-grade security with end-to-end encryption, audit logging, and role-based access controls. ### Real-Time Analytics Custom dashboards with live data streams, exportable reports, and anomaly detection alerts. ### Workflow Automation Build multi-step workflows with conditional logic, scheduled triggers, and webhook integrations. ### Team Collaboration Shared workspaces with inline comments, version history, and granular permission controls. ### Global CDN Content delivered from 200+ edge locations worldwide with automatic cache invalidation and purging. Demo 2 — Bento Grid, Dark Mode ## Developer Platform Dark bento grid with 2 highlighted cards spanning double width. DM Sans font, purple icon color, teal accents. Gap 16, radius 12, CTA links enabled with scroll animation. --- ## Built for Developers Everything you need to ship faster View Documentation ### REST & GraphQL APIs Comprehensive API coverage with auto-generated SDKs for Python, Node, Go, and Ruby. Rate limiting, pagination, and webhook subscriptions included. Explore API ### Edge Functions Deploy serverless functions to 50+ regions with sub-10ms cold starts and automatic scaling. Learn more ### OAuth 2.0 & SSO Enterprise authentication with SAML, OIDC, and MFA. Manage scopes, tokens, and session policies from one dashboard. Security docs ### Managed Database Fully managed Postgres with automatic backups, point-in-time recovery, read replicas, and connection pooling. Scale storage independently. Database docs ### CI/CD Pipelines Git-triggered deployments with preview environments, parallel test execution, and automatic rollbacks. Pipeline setup ### CLI Toolkit Full-featured CLI for local development, testing, and deployment. Scaffold projects, run migrations, and tail logs. Install CLI Demo 3 — Alternating Rows, Images ## Product Showcase Alternating left/right image rows. Inter font at 40px heading, image-based visuals with 300px height and 12px radius. Clean SaaS product page style with "Learn more" CTAs on each feature. --- ## How It Works From setup to scale in four steps ![Visual Workspace](https://www.nopethemes.com/hubfs/raw_assets/public/studionope-magazine/images/templates/helper-img-1.jpg) ### Visual Workspace Design workflows visually with our drag-and-drop canvas. Connect data sources, apply transformations, and preview results in real time without writing a single query. Learn more ![Real-Time Collaboration](https://www.nopethemes.com/hubfs/raw_assets/public/studionope-magazine/images/templates/helper-img-2.jpg) ### Real-Time Collaboration Work together with multiplayer editing, threaded comments on any element, and live cursors. See who is viewing and editing each document in real time across your entire organization. Learn more ![Automated Reporting](https://www.nopethemes.com/hubfs/raw_assets/public/studionope-magazine/images/templates/helper-img-3.jpg) ### Automated Reporting Schedule reports to stakeholders with branded templates, conditional formatting, and dynamic date ranges. Connect to Slack, email, or any webhook endpoint for delivery. Learn more ![Enterprise Controls](https://www.nopethemes.com/hubfs/raw_assets/public/studionope-magazine/images/templates/helper-img-4.jpg) ### Enterprise Controls Fine-grained permissions at the workspace, folder, and document level. SSO enforcement, IP allowlisting, data residency options, and comprehensive audit logs for every action. Learn more Demo 4 — Icon List, Narrow Width ## Enterprise Compliance Vertical icon list at 800px width. Libre Baskerville headings with Source Sans 3 body. Navy background with gold check-circle icons. Checklist style for compliance and enterprise features. --- ## Enterprise Ready Everything your compliance team needs ### SOC 2 Type II Certified Annual third-party audits verify our security controls, availability, and confidentiality practices meet the highest industry standards. ### GDPR & CCPA Compliant Built-in data subject request handling, consent management, and automated data retention policies across all regions. ### 99.99% Uptime SLA Contractual availability guarantees backed by multi-region redundancy, automatic failover, and 24/7 infrastructure monitoring. ### Role-Based Access Control Define custom roles with granular permissions at the organization, workspace, and resource level. Enforce least-privilege access across your team. ### End-to-End Encryption AES-256 encryption at rest and TLS 1.3 in transit. Customer-managed encryption keys available for regulated industries. ### Comprehensive Audit Logs Immutable, exportable logs for every user action, API call, and configuration change. Retained for 7 years with SIEM integration support. Demo 5 — Card Grid, 4 Columns, Colorful ## Feature Showcase Compact 4-column card grid with medium shadow, hover lift, and purple icon backgrounds. Inter font, 16px titles, 13px descriptions. 8 features with CTA links and scroll animation. --- ## Everything You Need A complete toolkit for modern teams See All Features ### Quick Start Go from sign-up to production in under five minutes with pre-built templates and guided onboarding. Get started ### Version Control Full change history with branching, diffing, and one-click rollback to any previous state. Learn more ### Edge Computing Run logic at the edge for sub-millisecond response times across every continent. Explore ### Threat Detection AI-powered anomaly detection with automatic blocking and real-time incident alerts. Security ### Team Management Invite members, assign roles, and manage permissions across unlimited workspaces. Teams ### Multi-Region Deploy to US, EU, or APAC regions with automatic data residency compliance. Regions ### Usage Analytics Track adoption, identify bottlenecks, and optimize with built-in product analytics. Analytics ### Custom Integrations Connect any tool with webhooks, REST APIs, and a library of 200+ pre-built connectors. Integrations --- ## Setup & Configuration Feature Grid Pro displays product features, service highlights, or capability lists in four distinct layouts. Add features via the repeater in the Content tab, choose a layout mode, toggle icons or images, and style everything from the Style tab. ### Adding Feature Entries Each feature entry supports an icon (FontAwesome) or image, title, description, optional CTA link with label and URL, and a highlight toggle for bento layouts. You can add up to 24 features per module instance. ### Icons vs. Images Toggle between icon and image mode with the Icon Type setting. Icons use FontAwesome Solid with customizable size, padding, radius, color, and background color. Images are best for alternating row layouts where large visuals accompany the feature description. Image height and radius are independently controlled. --- ## Layout Modes - **Card Grid**: 2, 3, or 4 columns of equal cards. Collapses to 2 on tablet, 1 on mobile. Best for feature overviews with consistent card sizing. - **Bento Grid**: Asymmetric grid where highlighted features span 2 columns. Creates visual hierarchy by drawing attention to key capabilities. Enable the Highlight toggle on individual features to span them. - **Alternating Rows**: Full-width rows that alternate image position left and right. Ideal for product walkthroughs, process explanations, and storytelling layouts with large images. - **Icon List**: Vertical list with icon left, content right, and dividers between entries. Perfect for checklists, compliance features, and dense information layouts. ### Bento Highlight Feature In Bento layout, toggle the Highlight switch on any feature to make it span 2 columns. Highlighted cards get more horizontal space for longer descriptions or more prominent positioning. Non-highlighted cards fill single cells in the remaining grid. --- ## Scroll Animation Enable the Animate on Scroll toggle in Settings to add fade-in reveal animations as features enter the viewport. Each card animates individually with a staggered delay based on its position in the grid. Animation uses IntersectionObserver for reliable triggering regardless of page length or dynamic content loading. Respects the prefers-reduced-motion media query. --- ## Style System 50+ style fields organized across six groups, all accessible from the Style tab. No CSS editing required. - **Container (2 fields)**: max width and horizontal padding. Controls the outer content boundary. - **Colors (14 fields)**: section background, card background/border/hover, heading and subheading color, feature title and description color, icon color and background, card CTA color and hover, section header CTA color and hover. - **Typography (7 fields)**: heading and body Google Font pickers with theme inheritance, plus independent sizes for heading, subheading, feature title, feature description, and CTA text. - **Card (11 fields)**: border radius, padding, grid gap, shadow and hover shadow (none/sm/md/lg), content gap between elements, icon size, icon padding, icon radius, image height, and image radius. - **Spacing (3 fields)**: section padding top, padding bottom, and heading margin bottom. - **Responsive (2 fields)**: tablet and mobile breakpoints for grid collapse behavior. --- ## Technical Details - **Zero dependencies**: vanilla JavaScript, no external libraries required - **Instance isolation**: all CSS scoped per module instance, multiple grids per page - **Accessible**: semantic HTML, proper heading hierarchy, ARIA labels on interactive elements - **GPU-optimized**: scroll animations use transform and opacity for 60fps performance - **Any template**: works on website pages and landing pages, no theme dependency - **FontAwesome 5 Solid**: full icon library included, no additional assets needed Feature Grid Pro by Studio Nope