✨ Tonic v1.1 is here — Forms module, Timeline block, and 12 bug fixes.
See what's newThe last HubSpot theme you'll ever need.
Tonic is a fully modular HubSpot CMS theme with 34 drag-and-drop modules, a CSS variable design token system, and production-tested templates for every page type.
Used by teams across industries
Built for production, not demos.
34
Drag-and-drop modules
6
Page templates
100 +
CSS token variables
0
Third-party dependencies
One theme. Every page type covered.
Full Hero — Full-width hero with background image, video, or color. Center or left-aligned content with dual CTAs.
Split Hero — 50/50 layout with text and media columns. Supports image, MP4 video, or embed. Column ratio is editor-controlled.
Video Background Banner — Autoplay background video with overlay text and CTAs.
CTA Banner — Centered or split-layout conversion banner. Ideal for mid-page and bottom-of-page calls to action.
Split CTA — Two-column CTA with heading, subtext, and buttons on one side and supporting content on the other.
Announcement Bar — Sticky top-of-page bar with static or marquee scroll mode.
Icon Feature Grid — Icon, heading, and description cards in a configurable column grid. Supports icon-top and icon-left layouts.
Feature List — Checklist-style feature blocks with icon, title, description, and optional link.
Cards Repeater — Media-flexible card grid supporting image, icon, or no-media variants. Editor controls column count and card layout.
Process Steps — Numbered or icon-driven step sequence with optional connectors. Horizontal and vertical orientations.
Timeline — Date-labeled vertical timeline for company history, product roadmaps, or event sequences.
Section Header — Standalone eyebrow, heading, subheading, and optional CTA used between content sections.
Testimonials Grid — Star-rated quote cards with avatar, author name, title, and company logo. Configurable column count.
Testimonials Slider — Auto-advancing carousel of testimonial cards with manual navigation.
Stats and Numbers — Animated countup stat display with prefix, suffix, label, and description. Card or inline style.
Logos Scroller — Client logo grid or auto-scrolling marquee. Supports linked and unlinked logos.
Team Grid — Team member cards with photo, name, title, bio, and social links.
FAQ Accordion — Configurable accordion with chevron or plus-minus icons. Single or multiple open items. Outputs FAQ schema markup.
Tabbed Content — Underline, pill, or button-style tab bar with panel content. Collapses to accordion on mobile.
Breadcrumbs — Schema-marked breadcrumb trail with configurable separator and custom label override.
Countdown Timer — Live days/hours/minutes/seconds display with expired state and optional CTA.
Image Gallery — Masonry or grid layout with lightbox. Captions and alt text per image.
Slider — Multi-item carousel with autoplay, dots, and arrow navigation. Slide content is editor-built.
Video — YouTube, Vimeo, or MP4 embed with poster image and autoplay options.
Image + Text — Two-column image and text module with alignment and ratio controls.
Data Table — Responsive table with optional header row highlighting and alternating row shading.
Map Embed — Google Maps embed with configurable zoom, markers, and map type.
Blog Listing — Main post grid for the blog index. Adapts for tag filters, author pages, and the /all view automatically.
Blog Filter — Tag/topic pill bar that generates native HubSpot filter URLs. Active state tracks the current filter.
Blog Pagination — Three styles: Numbered, Simple (prev/next), and Minimal (older/newer).
Blog Post Header — Global post header with featured image, title, author, date, read time, and topic tags.
Blog Table of Contents — Auto-generated TOC from post headings with smooth scroll and active section tracking.
Blog Author Box — Author card with avatar, bio, and social links.
Blog Related Posts — Content and tag-scored related post grid shown at end of each post.
Real teams. Real results.
We rebranded our entire HubSpot site in a morning. Changed the primary color in theme settings and every module updated. That's not supposed to be that easy.
My client wanted a homepage with a hero, feature grid, testimonials, stats, and a CTA. I built it in under an hour without writing a single line of CSS.
The FAQ module outputs proper schema markup and the blog TOC is genuinely better than anything I've seen on the marketplace. Worth every dollar.
Up and running in three steps.
-
1
Purchase the theme
Buy Tonic from the HubSpot Asset Marketplace. It's instantly available in your HubSpot account.
-
2
Apply to your portal
Go to Marketing → Files and Templates → Design Tools. Apply the Tonic theme to your portal or to individual pages.
-
3
Customize and publish
Open Theme Settings to set your brand colors, fonts, and spacing. Build pages with drag-and-drop modules. Publish.
Common questions
Tonic works with HubSpot CMS Hub Starter, Professional, and Enterprise. You need CMS access to install and use themes.
Yes — that's the whole point. Every module is designed for content editors. Background colors, column counts, heading levels, and layout variants are all controlled in the HubSpot page editor without touching code.
Yes. Tonic modules are native HubSpot modules. Smart content, personalization tokens, A/B testing, and HubSpot's built-in analytics all work as expected.
Open Design Tools → Theme Settings and change the primary, secondary, or accent color. Every Tonic module uses CSS custom properties that inherit those values — the whole site updates on save.
Yes. Tonic includes seven blog-specific global modules: listing, filter, pagination, post header, post body, table of contents, author box, and related posts. They're all pre-wired to HubSpot's blog template slots.
Each purchase covers one HubSpot portal. Contact us if you need a multi-portal or agency license.