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 Cards

Search CTA Card - 3 Column [SG] in 53

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

More details
#

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.

Click here
#

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.

Click here
#

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.

Click here

CTA Card with Image

Search CTA Card - Single Full [SG] 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:
  • Light
  • Dark
HubSpot

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.

Click here

CTA Content Block

Search CTA Content Block [SG] in 53

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

More details
Background options:
  • White
  • Light

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

CTA Gallery Rollover

Search CTA Gallery [SG] in 53

This module organizes a collection of CTA cards into a "gallery" view, with hover interactions and distinct buttons for navigating to other resources.

More details

Feature List

Search Feature List [SG] 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
  • Available feature 1
  • Available feature 2
  • Unavailable feature 1
  • Unavailable feature 2
  • Unavailable feature 3
Product 2
  • Available feature 1
  • Available feature 2
  • Available feature 3
  • Unavailable feature 1
  • Unavailable feature 2

Full-Width CTA

Search 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 Offers 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
sg-defaults_garden.png
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
sg-defaults_figures.png
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
sg-defaults_doge.png
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 Promo Bar [SG] in 53

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

More details

We're doing a promotion that you may be interested in!

We're doing a promotion that you may be interested in!

Slide-In CTA

Search Slidebox [SG] in 53

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

More details

Social Icons

Search Social Media Account Icons [SG] 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 Table [SG] 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
 
Column 1
Column 2
Column 3
Add a feature to compare against in your columns

Column 1


Column 2


Column 3


Add a second feature to compare against in your columns

Column 1

Column 2


Column 3


Add a third feature for comparison

Column 1

Column 2

Column 3


Countdown Timer

Search Countdown [SG] 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...

Days
Hours
Minutes
Seconds

Oh no! Looks like you missed it :(

Google Maps Location

Search Google Maps Location in 53

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

More details
Background options:
  • White
  • Light
  • Dark

Headquarters

25 First Street, 2nd Floor, Cambridge, MA 02141, United States

View larger map

Headquarters

25 First Street, 2nd Floor

Cambridge, MA 02141

United States

Tell me more!

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

Graph Visuals

Search Graph Visual [SG] 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
Annual growth

Statistic Cards

Search Multi-Column Stats [SG] 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
  • More than

    32%

    of visitors find this interesting

  • Statistics are

    4x

    more effective with descriptions

Up / Down Vote

Search Up / Down Vote [SG] in 53

Up / Down Vote allows a visitor to interact with the page by voting for or against ideas, initiatives, preferences, etc.

More details

Who would you rather hang out with?

    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 Book a Meeting [SG] 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.

    Page Header

    Search Page Header [SG] 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. Get a demo and see how you can be even more successful with your marketing.

    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.

    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.

    Section Header

    Search Section Header [SG] 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

    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 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
    sg-defaults_hq-large.png

    Logo Carousel

    Search Logo Carousel in 53

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

    More details
    Background options:
    • White
    • Light
    • HSLogo_color.svg
    • HSLogo_color.svg
    • HSLogo_color.svg
    • HSLogo_color.svg
    • HSLogo_color.svg
    • HSLogo_color.svg

    Multi-Row Content

    Search Multi-Row Content [SG] in 53

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

    More details
    Background options:
    • White
    • Light
    1. sg-defaults_garden.png

      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. sg-defaults_doge.png

      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

    Photo Gallery

    Search 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

    Photo Grid

    Search Photo Grid in 53

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

    More details
    349x255-1,4,5.gif 680x258-2.gif 715x258-3.gif 349x255-1,4,5.gif 349x255-1,4,5.gif 495x235-6,8,13.gif 411x297-7,10,11,14.gif 495x235-6,8,13.gif 348x232-9.gif 411x297-7,10,11,14.gif 411x297-7,10,11,14.gif 604x298-12.gif 495x235-6,8,13.gif 411x297-7,10,11,14.gif

    Video Gallery

    Search Video Gallery [SG] 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

    Wistia Playlist

    Search Wistia Playlist Preview [SG] 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 Chapters [SG] in 53

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

    More details

    Fixed Secondary Navigation

    Search Fixed Secondary Nav [SG] 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 Tabs [SG] 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
    • Tab 1
    • Tab 2

    Tab 1

    sg-defaults_hq-large.png

    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.

    Tab 2

    Tell me more!

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

    • Lorem ipsum dolor sit amet
    • Consecte tur adipiscing elit
    • Sed do eiusmod tempor incididunt
    • Labore et dolore magna

    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 Testimonial 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
    sg-defaults_testimonial-avatar-1.svg
    Since implementing HubSpot's software and inbound marketing methodology, we have grown organic traffic by 450%.
    sg-defaults_testimonial-avatar-1.svg
    Since implementing HubSpot's software and inbound marketing methodology, we have grown organic traffic by 450%.

    Testimonial Slider

    Search Testimonial Slider [SG] 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
    • sg-defaults_testimonial-avatar-1.svg
      Since implementing HubSpot's software and inbound marketing methodology, we have grown organic traffic by 450%.

      Kathleen Knapp

      SEO Guru

    • sg-defaults_testimonial-avatar-2.svg
      Since implementing HubSpot's software and inbound marketing methodology, we have grown organic traffic by 450%.

      Al Gator

      Sales Associate

    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 Accordion [SG] 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:
    • 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.

    Featured Snippet

    Search Featured Snippet [SG] 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 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
    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.

    Fancy new header goes here

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

    Multi-Column Profiles

    Search Multi-Column Profiles [SG] in 53

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

    More details
    Background options:
    • White
    • Light
    • sg-defaults_testimonial-avatar-1.svg
      Kathleen Knapp
      SEO Guru

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

    • sg-defaults_testimonial-avatar-2.svg
      Al Gator
      Sales Associate

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

    Rich Text

    Search Rich Text [SG] in 53

    Create engaging content with a splash of branding.

    More details
    Background options:
    • White
    • Light
    • Gradients
    • 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.