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

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

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

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

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