Web Style Guide

The Web Style Guide is a showcase of HubSpot's Canvas approved modules that Marketers can use to build landing pages. The Canvas Design System has allowed HubSpot to create products and tools effectively and efficiently, and now this system is optimized and available to all.

CTAs

CTAs are opportunities for visitors to take action.

It is, quite literally, a "call" to take an "action." A CTA can be an image or line of text that prompts your visitors, leads, and customers to take action. And with close to ten CTA variations, you'll have users taking action in no time.

3 Column CTA Card

Search SG - CTA Cards in 53

These CTA Cards are suited for defining specific product examples, with an action for the user to learn more.

More details
Background options:
  • White
  • Light
  • Dark
HubSpot logo

Product Name

Fancy new header goes here

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

Learn more
HubSpot logo

Product Name

Fancy new header goes here

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.

Learn more
HubSpot logo

Product Name

Fancy new header goes here

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Learn more

CTA Card with Image

Search SG - Full-Width CTA Card in 53

This large CTA Card can highlight details about a specific product or offer, with an action for user to learn more.

More details
Background options:
  • White
  • Light
  • Dark
HubSpot logo

Product Name

Start Growing With HubSpot Today

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

Learn more

CTA Content Block

Search SG - CTA Content Block in 53

The CTA Content Block draws attention to a final call-to-action for your page.

More details
Background options:
  • White
  • Light
  • Dark

Start Growing with HubSpot Today

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

This is a line of microcopy to provide further information
Smiling Person

Feature List

Search SG - Feature Lists in 53

The Feature List module can be used to showcase the offerings of a single item or to compare the features of multiple items against one another.

More details
Background options:
  • White
  • Light
  • Dark

Product 1

Product 1 description

  • Available feature
  • Available feature
  • Available feature
  • Unavailable feature
  • Unavailable feature

Product 2

  • Available feature
  • Available feature
  • Available feature
  • Unavailable feature
  • Unavailable feature

Full-Width CTA

Search SG - Full-Width CTA in 53

The Full-Width CTA provides the user with an opportunity to take action, with two large button links and an optional description.

More details
Background options:
  • White
  • Light
  • Dark

This is the main description text for your call-to-action (this is optional)

Offer Cards

Search SG - CTA Cards in 53

These cards allow you to showcase a photo or offer preview with accompanying content and call-to-action.

More details
Background options:
  • White
  • Light
  • Dark

Fancy new header goes here

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

Learn more

Fancy new header goes here

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.

Learn more

Fancy new header goes here

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Learn more

Promo Bar

Search SG - Promo Bar in 53

The Promo Bar highlights a newsworthy mention or an upcoming event, with a CTA to learn more.

More details

Slide-In CTA

Search SG - Slide-In CTA in 53

The Slide-In CTA will add an image-based CTA that slides into view as the user scrolls.

More details
blog post templates

Social Icons

Search SG - Social Media Account Icons in 53

Add a collection of Canvas-themed social icons to share your content.

More details
Background options:
  • White
  • Light
  • Dark

Data Visualization

Data Visualization communicates data or information through visuals and graphics.

The goal is to communicate information clearly and efficiently to users. Use graphs, statistics, and more to clearly illustrate your ideas.

Comparison Table

Search SG - Table in 53

Use a Table to compare collection of features across multiple subjects, such as competitors and their products.

More details
Background options:
  • White
  • Light
  • Dark
Scroll to see more
 Column 1 Column 2 Column 3
Add a feature to compare against in your columns




Add a second feature to compare against in your columns

 



Add a third feature for comparison

 

 


Countdown Timer

Search SG - Countdown in 53

The Countdown is used to create interest and buzz around an upcoming event or deadline.

More details
Background options:
  • White
  • Light
  • Dark

Save the Date!

You're not going to want to miss this...

 

Oh no! Looks like you missed it :(

Google Maps Location

Search SG - Google Maps Location in 53

Generate an interactive Google Map view, centered on a specified location.

More details
Background options:
  • White
  • Light
  • Dark

Headquarters

Cambridge, MA 02141

Tell me more!

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit!

Headquarters

Cambridge, MA 02141

View larger map

Graph Visuals

Search SG - Graph Visual in 53

Provide a collection of data points that will dynamically generate a stylized graph visual in various formats.

More details
Background options:
  • White
  • Light
Annual growth

Interactive Flywheel

Search SG - Interactive Flywheel in 53

The Interactive Flywheel provides a simple, interactive chart for visitors to learn about the flywheel methodology.

More details
Background options:
  • White
  • Light
Interactive Flywheel Customers D e l i g h t A t t r a c t E n g a g e

HubSpot's Flywheel

Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Attract

Earn your people's attention, don't force it. Attract visitors with useful content and eliminate barriers as they try to learn about your company.
 

Engage

Open relationships, don't just close deals. Enable buyers to engage with you on their preferred timeline and channels. Tie sales incentives to customer success not just close rate.
 

Delight

Tie your success to your customers’. Shift resources to be more effectively distributed throughout the entire customer experience.

Customers

Businesses grow when customers succeed. It’s as simple as that. If every team isn’t aligned and working to minimize friction for your customers, the whole company loses momentum.
 

Statistic Cards

Search SG - Numbers in 53

Statistic Cards are useful for highlighting interesting and distinct data points related to the topic of a page.

More details
Background options:
  • White
  • Light
  • Dark
  • More than

    32%

    of visitors find this interesting

  • Statistics are

    4x

    more effective with descriptions

Forms

Forms request more information from visitors.

Use forms to request information, provide an offer to educate your visitors, or survey your customers to learn from them.

Book a Meeting

Search SG - Book a Meeting in 53

The Book a Meeting module allows you to provide prospects more flexibility in scheduling time to speak with a HubSpotter, rather than submitting a traditional form.

More details

COS Form

Search Form in 53

The Form is used to gather information from a visitor so that you can communicate with them at a later time.

More details

Headers

Headers introduce a page or section of a page.

They draw the user in by providing a brief introduction on what the purpose of the page or section is. Headers are often also supported with a visual.

Co-Marketing Logos

Search SG - Co-Marketing Logos in 53

Need a header that displays various company's logos on co-marketing campaigns? This module allows you to place up to four logos next to each other in a thin, paired-down header with no navigation elements.

More details
Background options:
  • White
  • Light
  • HubSpot Logo
  • HubSpot Logo

Page Header

Search SG - Page Header in 53

The Page Header is a large and engaging banner section for your page — a real marquee element — and will often be the first thing a visitor sees when visiting your page.

More details

All-In-One Inbound Marketing Software

Everything you need to launch effective marketing campaigns that make people interested in your business and happy to be your customer.

This is an area for additional copy.

 

All-In-One Inbound Marketing Software

Everything you need to launch effective marketing campaigns that make people interested in your business and happy to be your customer.

This is an area for additional copy.

All-In-One Inbound Marketing Software
Image Frame

All-In-One Inbound Marketing Software

Everything you need to launch effective marketing campaigns that make people interested in your business and happy to be your customer. Get a demo and see how you can be even more successful with your marketing.

This is an area for additional copy.

Section Header

Search SG - Section Header in 53

The Section Header is used to introduce new content sections on a page with a unique title and optional desctiption. This helps to visually separate your content, making it easier to digest for the viewer.

More details
Background options:
  • White
  • Light
  • Dark

An Example Section Header

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

Multimedia Content Formatting

Multimedia Content Formatting hosts modules that use imagery or video to support content.

A page full of words can be daunting and unexciting. Adding a collage of photos or a video case study from a long-time customer can engage the visitor and keep them reading.

Full-Width Image

Search SG - Full-Width Image in 53

A full-bleed image, illustrating something meaningful and complementary to the content of the page.

More details
Background options:
  • White
  • Light
  • Dark
sg-defaults_hq-large

Logo Carousel

Search SG - Logo Carousel in 53

A carousel of corporate logos, representing partnerships or co-marketing opportunities.

More details
Background options:
  • White
  • Light
  • Dark

Multi-Row Content

Search SG - Multi-Row Content in 53

Multi-Row Content is a versatile way of showcasing imagery with accompanying captions.

More details
Background options:
  • White
  • Light
  • Dark
  1. First Row Image

    Fancy new header goes here

    Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
    Learn more
  2. First Row Image

    Fancy new header goes here

    Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
    Learn more

Photo Gallery

Search SG - Photo Gallery in 53

Photo Gallery allows you to add a collection of photos to a page that will convert into a carousel view on smaller screens.

More details
Background options:
  • White
  • Light
  • Dark

Photo Grid

Search SG - Photo Grid in 53

Create a photo inspiration "board" with images of varying sizes, aligned into columns.

More details
Background options:
  • White
  • Light
  • Dark
Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot Jack the dog at HubSpot

Video Gallery

Search SG - Video Gallery in 53

The Video Gallery is used to showcase a wide range of video assets, such as case studies from customers or promotional videos.

More details
Background options:
  • White
  • Light
  • Dark

Wistia Playlist

Search SG - Wistia Playlist Preview in 53

The Wistia Playlist is a robust video player that features title and description information for a carousel of Wistia videos.

More details
 

Fancy new header goes here

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Learn more

Navigation

Let your visitors find what they're looking for, fast.

Increase the usability and findability of your page and its content with these efficient wayfinding patterns.

Chapters

Search SG - Chapters Navigation in 53

The Chapters Module allows you to navigate within a long page more easily.

More details
Background options:
  • White
  • Light
  • Dark

Fixed Secondary Navigation

Search SG - Fixed Secondary Navigation in 53

The Fixed Secondary Nav sticks to the top of your page and provides a collection of useful links (sticky functionality disabled for demonstration).

More details

Tabs

Search SG - Tabs in 53

Tabs are used as a tool to navigate related content pieces within the same page, allowing your visitors to explore and discover on-page.

More details
Background options:
  • White
  • Light
  • Dark
  • New tab
  • New tab

New tab

HubSpot Cambridge Office

Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

New tab

HubSpot Cambridge Office

Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Testimonials

Testimonials show off how others have benefited from your product or service.

This form of social proof is a powerful tool for establishing trust and encouraging potential customers to take action.

Testimonial

Search SG - Testimonials in 53

Testimonials are used to display quotes from customers and partners, providing a powerful way to establish trust and encourage visitors to buy, sign up, fill out a form, or take action.

More details
Background options:
  • White
  • Light
  • Dark
Kathleen Knapp Headshot
Since implementing HubSpot's software and inbound marketing methodology, we have grown organic traffic by 450%
Kathleen Knapp Headshot
Since implementing HubSpot's software and inbound marketing methodology, we have grown organic traffic by 450%

Testimonial Slider

Search SG - Testimonials in 53

Testimonials are used to display quotes from customers and partners, providing a powerful way to establish trust and encourage visitors to buy, sign up, fill out a form, or take action.

More details
Background options:
  • White
  • Light
  • Dark
  • Kathleen Knapp Headshot
    Since implementing HubSpot's software and inbound marketing methodology, we have grown organic traffic by 450%
  • Kathleen Knapp Headshot
    Since implementing HubSpot's software and inbound marketing methodology, we have grown organic traffic by 450%
  • Kathleen Knapp Headshot
    Since implementing HubSpot's software and inbound marketing methodology, we have grown organic traffic by 450%

Text Content Formatting

Text Content Formatting hosts modules that provide different ways to showcase text.

Share your content in a way that engages visitors of your landing page and keeps them "turning the page".

Accordion

Search SG - Accordion in 53

The Accordion is used to hide long pieces of content that is revealed when the visitior clicks, allowing you to keep your pages shorter while still being informative.

More details
Background options:
  • White
  • Light
  • Dark
  • Tell me more!

    Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

  • Tell me more!

    Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

  • Tell me more!

    Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

  • Tell me more!

    Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Featured Snippet

Search SG - Featured Snippet in 53

The Featured Snippet is an SEO-optimized snippet of information that plays well with Google's scrapers.

More details

Multi-Column Content

Search SG - Multi-Column Content in 53

Multi-Column Content is a versatile way to add columns of content to a page.

More details
Background options:
  • White
  • Light
  • Dark

Fancy new header goes here

Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Learn more

Fancy new header goes here

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.
Learn more

Fancy new header goes here

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
Learn more

Multi-Column Profiles

Search SG - Multi-Column Profiles in 53

Multi-Column Profiles allows you to introduce team members, authors, speakers, or any other noteworthy individuals.

More details
Background options:
  • White
  • Light
  • Dark
  • Kathleen Knapp Headshot

    Kathleen Knapp

    SEO Guru

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

  • Al Gator Headshot

    Al Gator

    SEO Guru

    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.

Rich Text

Search SG - Rich Text in 53

Create engaging content with a splash of branding.

More details
Background options:
  • White
  • Light
  • Dark

Fancy new header goes here

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

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Well... this is embarrassing.

Looks like there aren't any modules that match your search.

Please check that you spelled everything correctly, or try another search term.