Style Guide Modules

Stay on brand and in style with Style Guide modules, made exclusively for HubSpot employees

Overview

What is a module?

Modules are the building blocks of all HubSpot pages. We use them to hold all sorts of web content, from testimonials to photo galleries and everything in between. To make it easier to build consistent, beautiful pages on HubSpot.com, we’ve developed this library of custom modules that reflect our brand values and style principles.

All these modules are flexible; in many cases, they will change to best accommodate whatever content is provided. (For example, the Multi-Column Content module will show different numbers of columns based on how many fields are completed on the page editor.) Each module also has a variety of background colors you may choose from the page editor. And of course, every module is 100% mobile-friendly.

To build a complete HubSpot page, you can stack these modules in any variety of ways. In each section, we’ve added a link to a live HubSpot page with that module in use: these are good places to start if you’re looking for inspiration for your own page.

How to use the Style Guide

First, you'll need access to the HubSpot portal. Read up on how to get access, then use the style guide for all pages going forward. Use one of the existing Style Guide templates to create new pages from that template. Do not clone templates!

Before starting your page, we’d recommend collecting all the assets that you’ll need: photos, videos, testimonials, and the copy. Next, think about what you’re trying to accomplish with your page. Are you trying to drive people to fill out a form? What persona will be viewing this page? What is the simplest message that you want this page to communicate? Once you have your assets and a clear idea of how to structure your page, it’s time to start building!

When starting your page, choose the 1-Column Flexible [SG] template. You can then add any the style guide modules straight from the page editor: find the link to “Add module” and search for the exact module name that you see on this page. (You’ll also see some older custom modules that are not part of the style guide. Because these are no longer maintained and may eventually be deleted, it’s important to make sure you’re using only modules from this library.) Other Style Guide templates have different instructions, so be sure to check those out separately.

Golden Rules

Never clone templates
Don't use inline styling or scripts — help us stay in brand!
Don't edit or copy any existing custom modules
Name your page using these handy naming conventions

How to Create a Style Guide Page

To use the Style Guide, go to Content, click Website Pages, create a new website page, find a Style Guide template (they're listed below, but we recommend choosing 1-Column Flexible [SG]), name your page, and add Style Guide modules to that page.

See the GIF below for an example.

Have an idea for a new module? Need something more for your latest campaign? Let us know!

Templates

1-Column Filterable Content [SG]

A flexible Style Guide template with interactive filterable items. When creating a new page, choose the '1-Column Filterable Content [SG]' template from the list.

How to Use
1-Column Flexible [SG]

Almost every HubSpot page uses this template — make sure your pages do, too! To use, create a new page and choose the '1-Column Flexible [SG]' template. You can then add any style guide modules straight from the page editor.

How to Use
gated-content.png
1-Column Gated Content [SG]

This template is similar to the subscriber gates you may have seen on publications like WSJ.com or even First Round Capital's blog. Check out the instructions for how to get started gating your content!

How to Use
example-landing-page.png
1-Column Flexible [SG] (LP)

Use this template for any landing pages. Create a page using the 1-Column Flexible [SG] (LP) template from the Content menu's Landing Pages link.

Thank You.png
1-Column Flexible [SG] (TYP)

When creating a thank you page for your landing page, go to Content, click Landing Pages and create a Thank You Page using the 1-Column Flexible [SG] (TYP) template. Remember the golden rule: Don't clone templates!

Page Features

Shareable image

Want to control the image that displays when your page is shared on Facebook, Slack, and other networks? Use the Shareable image field on any Style Guide page by going to Edit Modules and clicking the Shareable image field. Facebook refers to this image as an Open Graph image.

More Info

Carousels

About the module

This module allows you to display up to fifteen logos in a compact, auto-scrolling carousel. When you hover over individual logos, they will switch from grayscale to full color. On desktop, you'll see dots to show you how many slides are in the module; on mobile, you can swipe through the entire carousel.

How it's used

Use this to display partner or customer logos. Consider adding a link to each module to connect back to the company's homepage.

Logo Carousel

  • Square2Marketing.png
Keep in Mind
This module needs more than five logos before you'll see the carousel interaction. There is the option for an offwhite background in the page editor: if you use this, make sure all of your logos have a transparent background.

Testimonial Slider

Search for Testimonial Slider [SG]

  • blog_avatar_pwilver.png
    If HubSpot were a teenager, she would work in a comic book shop.

    Lorn Ipsum, Wombat Wrangler

    Franklin Park Zoo

  • liz_shaw_hubspot_dragon.jpg
    Mark my words: One day HubSpot will host a Jaws movie night.

    Liz Shaw, Popcorn Fanatic

    Somerville Theatre

About the Module

This module shows an rotating carousel of testimonials. Showcase testimonials with headshots to give your page some flare!

How it's used

You may use as many testimonials as you'd like. Simply add the quote, name, and other optional information to each testimonial. There are also options for the carousel itself, including whether or not it should play automatically and its background color.

Content Containers

Accordion

Search for Accordion [SG]

About the module

This accordion is meant to hold extra content that doesn’t need to be visible on page load. Using this module will help you keep your pages shorter while still accommodating as much information as you need to provide.

How it's used

Consider using this for a lengthy FAQs section, rules for content submissions/contests, or “footnotes” to the page’s main content. Since the contents of the accordion are hidden by default, any information in the accordion should be secondary to the purpose of the page.

  • Tell me more!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper dui vel erat imperdiet, sagittis efficitur erat lacinia. Donec id orci volutpat elit vestibulum euismod non a turpis. Nam venenatis tellus a lacus finibus, quis aliquet elit tempor. Vivamus auctor nisi fringilla velit tincidunt maximus. Nunc suscipit, dui et pellentesque rhoncus, lorem ex convallis purus, eu tincidunt libero mi a massa.

    That's rad.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper dui vel erat imperdiet, sagittis efficitur erat lacinia. Donec id orci volutpat elit vestibulum euismod non a turpis. Nam venenatis tellus a lacus finibus, quis aliquet elit tempor. Vivamus auctor nisi fringilla velit tincidunt maximus. Nunc suscipit, dui et pellentesque rhoncus, lorem ex convallis purus, eu tincidunt libero mi a massa.

  • What do we have here?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper dui vel erat imperdiet, sagittis efficitur erat lacinia. Donec id orci volutpat elit vestibulum euismod non a turpis. Nam venenatis tellus a lacus finibus, quis aliquet elit tempor. Vivamus auctor nisi fringilla velit tincidunt maximus. Nunc suscipit, dui et pellentesque rhoncus, lorem ex convallis purus, eu tincidunt libero mi a massa.

  • Oh, hello there!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper dui vel erat imperdiet, sagittis efficitur erat lacinia. Donec id orci volutpat elit vestibulum euismod non a turpis. Nam venenatis tellus a lacus finibus, quis aliquet elit tempor. Vivamus auctor nisi fringilla velit tincidunt maximus. Nunc suscipit, dui et pellentesque rhoncus, lorem ex convallis purus, eu tincidunt libero mi a massa.

Keep in Mind
You can add up to five accordion sections in this module. Make sure the titles clearly explain the content inside.

Table

Search for Table [SG]

About the module

The Table module is used for comparing two items. You can add tooltips for each characteristic. In each cell, you can add a checkbox and/or description. You may add a max of 10 characteristics to each table.

How it's used

Use this module to compare two products. It's perfect for pointing out what features a product has relative to its competitor.

Vikings
Samurai
Vikings were Nordic seafarers, mainly speaking the Old Norse language, who raided and traded from their Northern European homelands across wide areas of northern, central and eastern Europe, during the late 8th to late 11th centuries.
The samurai were the warriors of premodern Japan. They later made up the ruling military class that eventually became the highest ranking social caste of the Edo Period. Samurai employed a range of weapons such as bows and arrows, spears and guns, but their main weapon and symbol was the sword.
Weapon
Comparing short-range weapons

Vikings

Great Axe

Samurai

Katana

Use of swords

Vikings


Samurai


Mode of transportation

Vikings

Longboat

Samurai

Horse

Code of honor

Vikings

Samurai


Mounted archery

Vikings

Samurai


Totally cool
The all-telling coolness factor

Vikings


Samurai


Keep in Mind
Don't add too much text to each cell. Drive your message home with a simple checkbox (or lack thereof!).

Tabs

Search for Tabs [SG]

About the module

This module is comprised of up to four tabs which transform into accordions on mobile devices. You can even upload different desktop-, tablet-, and mobile-specific featured images in each tab.

How it's used

Tabs work best when each tab's content is related, but specific to help visitors find exactly what they're looking for. For instance, on an event page, you might want a "For Marketers" tab, as well as a "For Partners" tab, so people can find what they need faster.

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

Tab 1

500x262.png

Using a computer? Resize your browser window to a narrower size and watch these tabs transform into accordions. You'll also see the different tablet and mobile featured images within 'Tab 1'. Hooray flexibility!

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Tab 2

Header Level 3

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Tab 3

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Tab 4

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Keep in Mind
If you upload a Featured Image on any tab, be sure to compress it first (we recommend TinyPNG). That will make sure your page loads super fast, even on mobile devices with a spotty connection.

Testimonial

Search for Testimonial

About the module

Testimonials can be a powerful way to establish trust and encourage visitors to buy, sign up, fill out a form, or take action. Use this module to display quotes from customers and partners. If you have multiple testimonials, try the Testimonial Slider module instead.

How it's used

Other than the testimonial quote itself and the person's name, the rest of the fields in this module are optional. Use one or two of these to break up a long page and show off a happy customer or partner.

blog_avatar_pwilver.png
If HubSpot were a teenager, she would work in a comic book shop.
Keep in Mind
If uploading a headshot, make sure the image is a perfect square.

CTAs

CTA Content Block

Search for CTA Content Block [SG]

Holy moley, this module is eye-catching!

This module shows a HubSpotter at random in the bubble to the right. You can add a smart or regular CTA, plus a description and disclaimer text. Cowabunga!

Want to keep things transparent? That's so HubSpotty of you! Feel free to add a disclaimer to the module in this area.

Full-Width CTA

Search for Full-Width CTA [SG]

About the module

The CTA module gets your users to take action: moving to another page, requesting more info, or signing up for great content. Best used at the bottom of the page after the visitor had gone through your main narrative.

How it's used

When using this module, you have several options for how it will display. You can add one or two CTAs, choose three different background colors, and even include a short description. If you only use one CTA, you have the option to toggle its color from our default action blue to a more muted white.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Keep in Mind
Make it clear to the visitor what you're linking to, and keep the text inside the CTA as short and snappy as possible. And don't forget to test your links!

Offers

Search for Offers

About the module

This module functions as a digital library and holds any learning resources a visitor might desire: slideshare presentations, marketing tools, ebooks, webinars, and templates.

How it's used

Use this for offers that are relevant to whatever persona your page is targeting. We'd recommend adding no more than one of these modules per page, perhaps near the end of the page as a final call-to-action. We recommend 113x148 pixel images with a transparent background, but this field is flexible.

113x148.png
Illustrious Illustrated Guide

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Download Now
113x148.png
Sumptuous Strategies

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn more
113x148.png
Tantalizing Templates

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Check it Out
Keep in Mind
Make sure your titles are short and snappy; this module can only accommodate two lines of title text. Similarly, don't make your descriptions too wordy; space is limited by the size of this module wrapper.

Promo Bar

Search for Promo Bar [SG]

About the module

This module features a dark teal background with optional icon, description, and CTA.

How it's used

Simply add description, CTA text with link, and optional 25x25 pixel icon.

Lorem ipsum dolor sit amet pellentesque euismod.

Social Media Account Icons

Search for Social Media Account Icons [SG]

About the module

This module displays links to social media accounts. You may choose the icon size. Below, in order from top to bottom, are the large, medium, and small sizes.

How it's used

Add the module to your page, then add links for the accounts you'd like to display. You can change the icon size (small, medium, or large).

Keep in Mind
Be sure to include http:// before each URL; otherwise, your links won't work properly.

Events

Countdown

Search for Countdown [SG]

About the module

Use this module when you'd like to drum up interest in an event or deadline, or any number of timely things. This module's sure to catch any visitor's eye!

How it's used

Enter a month, day, year and time and this module will do the heavy lifting for you. Once the countdown is over, you can even display an expiration message. It's perfect for events pages!

Tick Tock

How long until January 1, 2019 at 9:00 AM?

Days
Hours
Minutes
Seconds

The wait is over!

That's how long!

Keep in Mind
Make sure to set an 'Expiration Message' that visitors will see once the countdown is over.

Google Maps Location

Search for Google Maps Location

About the module

Displaying an interactive Google map is helpful for event registration confirmation pages, pages about an office, and other pages where your visitor will eventually need a physical address.

How it's used

You can usually find the Google Map embed code by searching Google Maps for a location, clicking "Share", and copying the embed code. Other than the Google Map embed code and location title, all other fields are optional. We recommend also filling in the address fields for consistency's sake.

HubSpot

25 Cambridge St, Cambridge, MA,

View larger map

HubSpot

25 Cambridge St

Cambridge, MA

How to find us:

Take the elevator to the second floor. Hang a right and Perry will be waiting for you at reception.

Keep in Mind
Try to only use this module once per page — otherwise your page might take longer to load!

Forms

COS Form

Search for Form

About the module

These forms are used to collect information from users. Please stick to pertinent questions - no need to know their astrological sign, favorite pasta type, etc.

How it's used

These will be primarily used on landing pages, but you may also want to throw a form at the bottom of your site pages for a relevant offer or event registration.

Pop-up Modal with Exit Survey

Search for Pop-up Modal with Exit Survey [SG]

About the module

Want to know why people are leaving your page? Give this module a shot. Right before closing a tab, visitors will see a modal with an anonymous survey in it (i.e. this survey doesn't change their contact record). The survey results will be stored as a spreadsheet which you can access any time from this page. The date of each submission is stored automatically.

How it's used

Add one pop-up modal only to any flexible column on your page. Enter some questions along with their types, whether or not you'd like the form to be multi-step (i.e. paginated), and choose whether you want to add a submission tag. The submission tag column will add a unique tag to each submission's row which you may use to segment your data after, for example, you made significant updates to the page. The form submission date will be stored automatically in each row. Whenever you're ready to review your results, go to the results page and find your page by name or ID. Then download the CSV, which you can open in Excel, Google Drive, or similar spreadsheet applications.

Psst — before you go

Thank you! Your feedback is much appreciated.
That's odd, something went wrong. We've reported the error so someone will fix it ASAP!
This is an example of the Pop-up Modal with Exit Survey module. You won't be able to submit this form, but feel free to add it to your page. Sound good?
Did you know that this module's results are anonymous? You can download a spreadsheet of the data to see why people are leaving your page.
You can tag submissions, which is helpful if you need to segment your data for the same page. What do you think of that?
Checkboxes are another great option.
Congrats, you've reached the last question! You won't be able to submit on this page, unfortunately.
Next

To see this module in action, move your mouse's cursor near this window's 'close' button.

Graphs and Charts

About the module

A simple chart using CSV data (which needs to be converted to JSON), used to represent statistical data.

CSV Data Formats ››

How it's used

Select the graph type and fill out the required information. Please note: the data is required in a specific format, which you can find in the example CSV file.

Download demo video (MP4) ››

Side by Side Chart with Text

Search for Graph Visual [SG]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus nisl et nisi blandit, et posuere purus faucibus. Nunc porta, eros eu finibus congue, felis enim efficitur lorem, non bibendum felis neque pulvinar orci. Vivamus sollicitudin consequat est, vel cursus nibh.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vestibulum ullamcorper elit eu consectetur. Proin eget enim sed nunc dictum scelerisque id et dolor. Nam sit amet nulla et leo finibus viverra et ut felis. Etiam magna nisi, blandit ac lacus sed, congue rutrum massa. Aenean ultrices sodales nisl, eu mollis risus egestas nec. Fusce lorem nulla, dictum sed nulla vitae, mattis placerat felis. Suspendisse dignissim massa in ligula viverra, quis pulvinar dolor venenatis.

A chart title

Side By Side Chart Comparison

Search for Graph Visual [SG]

A complex bar chart
A complex column chart

Headers

About the module

This module is the title of your page, a real marquee element. It’s the first thing the visitor will see, so spend some time crafting messaging that is succinct, captivating, and easy to read. The goal is to make a connection with the visitor that keeps them engaged and scrolling through all the quality content below.

How it's used

Choose a color theme and image position (either as a background, to the right, in a laptop, or in a phone). All image styling and theming is automatically applied so you can worry about content instead of being on brand.

Image Frame

Far-Out Page Header

This page header has a green theme and places the 298x532px image inside of a phone. The laptop and phone options also allow for a background image (the image of the crowd). Its CTAs link to a standard link and a YouTube video.

Fabulous Page Header

This page header has a dark orange theme and aligns the image to the right. Its CTA links to a Wistia video.

Fancy Page Header

This page header has a blue theme and uses the image as a background. Its CTA links to a YouTube video.

Image Frame

Fantastic Page Header

This page header has a pink theme and places the 800x447px image inside of a laptop. Its CTA links to an MP4 video.

Keep in Mind
You can add a YouTube, Wistia, or MP4 video to this module. Check out the Video Gallery module for some instructions on how to find your video's YouTube or Wistia ID.

Section Header

Search for Section Header

About the module

This module is used to introduce your content with a title and a subtitle. A regular Batman (strong leader) and Robin (supportive sidekick) pairing.

How it's used

Once you've decided on the structure of your page, use the proper h2 or h3 header to break up your sections. It's a good idea to alternate between the white and offwhite background every time you make a new section. You can even add an ID to this section to use as an anchor link!

An Example Section Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Keep in Mind
You can add a header without a subheader, but the subheader shouldn't stand alone!

Multi-Column and Multi-Row Modules

Multi-Column Content [SG]

Search for Multi Column Content [SG]

About the module

This is an extremely versatile module for up to four columns of content.

How it's used

Fill out only the information you need; this module will adjust to fit whatever you provide. You can use it to display columns with only icons or only text, or you can flesh out each column with headlines and CTAs. Don't feel compelled to use every field if you don't have to!

Hello

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More ››

Greetings

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Let's go ››

Good morning

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Check It Out ››

Aloha

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Download Now ››
Keep in Mind
This module is intended to show icons; if you have photos, try the Photo Content module instead.

Multi-Column Profiles [SG]

Search for Multi-Column Profiles [SG]

About the module

Highlight your team members or other noteworthy people with this module.

How it's used

Choose whether you'd like to display profiles in rows or columns, then add as much data as you'd like for each profile. You can even link to social media accounts.

Our Awesome Team

  • liz_shaw_hubspot_dragon.jpg

    Lora Ipsa Dragon Tamer

    Lora Ipsa is a tamer of dragons and other assorted mystical beasts. She has been living in Candyland since 2006.

  • blog_avatar_pwilver.png

    Pello Tesque Professional Pizza Wizard

    Pello is a Boston-based pizza wizard and consumer. Ask him why pineapple should or should not go on pizza.

  • doge.jpg

    Barkley Adorable Puppy

    Barkley is an adorable puppy who heads up our Cuteness Department.

Keep in Mind
Try to use a small (less than 200px per side) square image to make your page load faster.

Multi-Row Content

Search for Multi-Row Content [SG]

About the module

This module can be used to showcase images with captions. For each row, you can even link to Wistia videos, YouTube videos, or a standard link.

How it's used

For each row, add a photo (we recommend smaller than 540x360), choose whether the first image should be on the left or right, add a description, and choose what type of CTA you'd like (standard link, YouTube, or Wistia).

  1. 540x360.png

    Row 1 Header

    Quisque pharetra facilisis dolor, quis vestibulum ex interdum id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec maximus blandit enim, at vulputate metus commodo at. Ut mollis sodales lorem eget bibendum.

    Get Started ››
  2. 540x360.png

    Row 2 Header

    Vestibulum eget nunc eget mauris semper consequat. Nulla varius sollicitudin leo id molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut diam a tempus. Donec eget sapien quis urna volutpat hendrerit ac id purus.

    Tell Me More ››
  3. 540x360.png

    Row 3 Header

    Vestibulum accumsan felis sit amet felis vehicula, at egestas turpis mollis. Vestibulum quis facilisis orci, sed ornare libero. Phasellus iaculis nunc ut diam molestie sodales. Donec nisl leo, cursus ac risus a, rhoncus vestibulum augue.

    View Video ››
Keep in Mind
Don't upload large images, as they can slow down your page. We recommend images smaller than 540x360 pixels.

Fixed Secondary Nav

Search for Fixed Secondary Nav [SG]

About the module

The fixed submenu can hold up to seven links, plus a CTA. It will “stick” to the top of the window as you scroll down the page. (For demo purposes, the fixed/sticky functionality is disabled on this Components page.)

How it's used

Have a super long page that’s broken into distinct sections, like a “how-to” guide? Maybe you’re making a microsite of related pages? Use a fixed submenu to help users navigate your page(s)!

Keep in Mind
Use anchor links (for example: “#section1”) in the nav to jump users to different sections of the same page. (Use the “Section Header” module when you start new sections of your page; you can add anchor links to that module!) Or use absolute/relative URLs to take users to different pages across the site.

Vertical Section Header Nav

Search for Vertical Section Header Nav [SG]

About the module

This module scrolls with the page and helps visitors navigate longer pages with multiple section headers. A menu will show on the side of the page, listing your section headers. Hover over a dot to reveal its title.

How it's used

First, be sure each of your section headers has an ID field filled in. The ID should be a single unique word without special characters (for example, cambridgeofficehours). Then, add the Vertical Section Header Nav [SG] to your page. Any section header with an ID will show as a menu item. Perfecto!

Photos and Videos

About the module

This module was originally built for our Jobs page, to feature employees with their departments. It's a fun upgrade from standard links. Hover over a CTA to reveal a hidden subheader!

How it's used

Use this module to highlight subpages with some dazzling images. We recommend photos of diverse HubSpotters or attendees that are ideally 319x206 pixels in size.

Keep in Mind
Try to upload images that are 319x206 pixels. Don't use too much text for your heading or subheading, since there's limited space.

Full-Width Image

Search for Full-Width Image [SG]

About the module

This simple module allows you to break up your page with a larger image.

How it's used

Do you have a couple photographs or product screenshots that help explain your content? Try adding this module underneath a "Section Header" to add visual interest to a page.

800x400-no-wider-than-800__var2.png
Keep in Mind
There are many ways to display photo content on a page. If you need more than one image, consider using the Photo Gallery instead. If you need to pair the image with text, check out the Photo Content module.

Photo Content

Search for Photo Content

About the module

These modules help tell specific stories and are ideal for photography. Use these to give some visual presence to case studies, partner events, or HubSpot culture.

How it's used

Photos help illustrate the story behind your copy, so this can be an effective module for event promotion. Each photo block has the option of adding a CTA, so consider using this module as a variation on the Multi-Column Content module; just use photos instead of icons.

500x350__var1.png
Hello

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn more
500x350.png
Bonjour

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Read about it
500x350__var2.png
Aloha

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Watch video

About the module

The photo gallery is a great way to add visual interest to the page and support your content with relevant HubSpot photography.

How it's used

Use this module to show off HubSpot culture, photos from past events, or customer stories.

Keep in Mind
Modules like this can slow down your page if your photos are too high-quality, so make sure your photos are reasonably sized (100K at the max file size). We recommend images shorter than 800px on each side (try 800 x 400). If you need help resizing your photos, let us know!

Photo Grid

Search for Photo Grid

About the module

This module is perfect for events and showcasing communities. Use it to add some pizzazz to any page.

How it's used

Add the Photo Grid module to your page and upload images using the recommended dimensions. If your images have different dimensions, this module will not display properly.

349x255-1,4,5.gif680x258-2.gif715x258-3.gif349x255-1,4,5.gif349x255-1,4,5.gif495x235-6,8,13.gif411x297-7,10,11,14.gif495x235-6,8,13.gif348x232-9.gif411x297-7,10,11,14.gif411x297-7,10,11,14.gif604x298-12.gif495x235-6,8,13.gif411x297-7,10,11,14.gif
Keep in Mind
Use the recommended image sizes listed above to ensure your photos display correctly.

About the module

This is a module to showcase HubSpot’s wide range of video work, such as case studies and promotional videos. Videos tell compelling stories and can be the fastest and most effective way to deliver your message.

How it's used

This module hosts Wistia or YouTube videos and autoplays silently on hover. We recommend using YouTube for SEO reasons. You can add a short line of text to appear in the upper left corner of each video; this is intended primarily for company names for case study videos. On hover, a customizable caption will slide across the bottom of each video. Make sure you add captions such as "Watch full case study" to entice the visitor to check out the entire video.

Keep in Mind
To use this module, you'll need to upload your videos to YouTube or Wistia and obtain the unique ID associated with each video. Need help finding the ID? It should be in your video's URL. Your video ID is the string of unique characters in that URL ("XXXXXXXXXX"). If you need assistance with uploading, tracking down a video, or if you don't have access to the HubSpot YouTube or Wistia accounts, contact the web team.

Wistia Playlist Preview

Search for Wistia Playlist Preview [SG]

 

CTA Section Title

The body of your CTA section. Go wild! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum dui quis luctus aliquam. Pellentesque hendrerit semper felis sit amet tempus. Ut ut vestibulum ante, quis malesuada urna. Nulla porttitor, diam quis fermentum imperdiet, tortor lorem hendrerit augue, in mollis sem nunc congue lectus. Integer suscipit finibus nisi, sed congue turpis interdum sed. Duis semper aliquet purus, a accumsan felis bibendum id. Quisque convallis turpis eu justo lobortis maximus.

Tell Me More
Keep in Mind
Snag the Wistia playlist ID from the URL of your playlist. It will be an alphanumeric code.

Statistics

Multi-Column Stats

Search for Multi-Column Stats [SG]

About the module

This module is useful for highlighting succinct stats. It even animates when you scroll past it — that's sure to draw attention!

How it's used

Each stat block has top text, the orange stat itself, and bottom text. Use as many as four stat blocks or as few as one; each stat block will populate based on how much or how little content you add.

  • 1/4

    marketers across the globe prioritize an inbound approach to marketing

  • Companies are

    3x

    as likely to see a higher ROI on inbound marketing campaigns than on outbound

  • Inbound marketing delivers

    54%

    more leads into the funnel than traditional outbound leads

  • Outbound leads cost

    49%

    more than inbound leads

Keep in Mind
We recommend using stats that are less than four characters long to prevent any text wrapping issues.

Numbers

Search for Numbers

About the module

This three-column module can show off three numbers with icons and captions.

How it's used

Use this for statistics about event attendance, active users, or whatever numerical data you have handy.

  • 986,124

    Pangolins

  • 461

    Pandas

  • 729

    Parakeets