Default Modules

Last updated:

The HubSpot CMS includes a number of default modules that developers can add to templates and that content creators can add to pages. Below is a listing of them all. Default modules can also be used as a source of inspiration for your own modules. When developing locally, you can fetch a specific default module using the module path (e.g. hs fetch @hubspot/linked_image.module).

You also can view and clone default modules in the Design Manager. These assets appear in a read-only @hubspot folder.

Default modules in Design Manager-1

Blog Comments

Supported in blog posts and blog listings

HubL 
{% module "blog_comments" path="@hubspot/blog_comments" %}

Blog Email Subscription

Supported in pages, blog posts, and blog listings

HubL 
{% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
Parameter name Type Default value
select_blog blog -
title text "Subscribe Here!"
response_message richtext Thanks for subscribing!

Button

Supported in pages, blog posts, and blog listings

HubL 
{% module "button" path="@hubspot/button" %}
Parameter name Type Default value
link link { "url": { "type": "EXTERNAL", "href": "www.hubspot.com", "content_id": null }, "open_in_new_tab": false, "no_follow": false }
button_text text "Add a button link here"
style { override_default_style (boolean), button_font (font), button_color (color), text_hover_color (color), button_hover_color (color) } { "override_default_style": false, "button_font": { "color": "#FFFFFF", "size_unit": "px" }, "button_color": { "color": "#000000", "opacity": 100 }, "text_hover_color": { "color": "#000000", "opacity": 100 }, "button_hover_color": { "color": "#CCCCCC", "opacity": 100 } }

Button (email)

Supported in emails

HubL 
{% module "button_email" path="@hubspot/button_email" %}
Parameter name Type Default value
link_to choice "url"
destination text ""
email_address text -
subscription_type choice "subscription_preferences"
file file -
meeting_field meeting -
cta_field cta -
page_field page -
text text "Add a button link here"
font_style font { "size": { "value": 16, "units": "px" }, "color": "#ffffff", "styles": { "bold": false, "italic": false, "underline": false }, "font": "arial, helvetica, sans-serif" }
background_color color "#197FC4"
border_enabled boolean false
border_width number 1
border_color color "#2d3e50"
corner_radius number 8
make_full_width boolean false
alignment choice "center"

Call-to-Action

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "cta" path="@hubspot/cta" %}
Parameter name Type Default value
guid cta -

Divider

Supported in pages

HubL 
{% module "divider" path="@hubspot/divider" %}
Parameter name Type Default value
height number 1
width number 50
color color { "color": "#000000", "opacity": 100 }
line_type choice "solid"
alignment choice "center"
show_padding boolean false
padding number 5

Main Email Body

Supported in emails

HubL 
{% module "email_body" path="@hubspot/email_body" %}
Parameter name Type Default value
html richtext <p>Hi&nbsp;{{contact.firstname}},</p> <p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p> <p>Use a list to:</p> <ul> <li>Explain the value of your offer</li> <li>Remind the reader what they’ll get out of taking action</li> <li>Show off your skill with bullet points</li> <li>Make your content easy to scan</li> </ul> <p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p> <p>Now wrap it all up with a pithy little reminder of how much you love them.</p> <p>Aw. You silver-tongued devil, you.</p> <p>Sincerely,</p> <p>Your name</p>

Office Location Information

Supported in emails

HubL 
{% module "email_can_spam" path="@hubspot/email_can_spam" %}
Parameter name Type Default value
html richtext <p id="footer" style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 12px; line-height: 1.34em; color: {{ secondary_font_color }}; display: block;">{{ site_settings.company_name }} &nbsp;&nbsp;{{ site_settings.company_street_address_1 }} &nbsp;{{ site_settings.company_street_address_2 }} &nbsp;{{ site_settings.company_city }} &nbsp;{{ site_settings.company_state }} &nbsp;&nbsp;{{ site_settings.company_zip }} &nbsp;&nbsp;{{ site_settings.company_country }} <br><br> You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }} . <br><br> Update your <a target="_blank" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};" data-unsubscribe="true">email preferences</a> to choose the types of emails you receive. <br><br> &nbsp;<a target="_blank" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};" data-unsubscribe="true">Unsubscribe from all future emails</a> &nbsp;</p>

Email Divider

Supported in emails

HubL 
{% module "email_divider" path="@hubspot/email_divider" %}
Parameter name Type Default value
height number 1
width number 50
color color { "color": "#000000", "opacity": 100 }
line_type choice "solid"
alignment choice "center"
hs_enable_module_padding boolean true

Footer

Supported in emails

Parameter name Type Default value
unsubscribe_link_type choice "both"
font font { "size": { "value": 12, "units": "px" }, "color": "#23496d", "styles": { "bold": false, "italic": false, "underline": false }, "font": "arial, helvetica, sans-serif" }
link_font font { "size": { "value": 12, "units": "px" }, "color": "#00a4bd", "styles": { "bold": false, "italic": false, "underline": true }, "font": "helvetica" }
align choice "center"
hs_enable_module_padding boolean false

Backup Unsubscribe

Supported in pages, blog posts, and blog listings

HubL 
{% module "email_simple_subscription" path="@hubspot/email_simple_subscription" %}
Parameter name Type Default value
header text "Email Unsubscribe"
input_help_text text "Your email address:"
input_placeholder text "email@example.com"
button_text text "Unsubscribe"

Subscription Preferences

Supported in emails

HubL 
{% module "email_subscriptions" path="@hubspot/email_subscriptions" %}
Parameter name Type Default value
header text "Communication Preferences"
subheader_text richtext If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
unsubscribe_single_text text "Uncheck the types of emails you do not want to receive:"
unsubscribe_all_text text "Or check here to never receive any emails:"
unsubscribe_all_unsubbed_text text "You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
unsubscribe_all_option text "Unsubscribe me from all mailing lists."
button_text text "Update email preferences"
resubscribe_button_text text "Yes, resubscribe me!"

Subscriptions Confirmation Message

Supported in emails

HubL 
{% module "email_subscriptions_confirmation" path="@hubspot/email_subscriptions_confirmation" %}
Parameter name Type Default value
header text ""
subheader_text richtext If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
unsubscribe_all_success text "You have successfully unsubscribed from all email communications."
subscription_update_success text "You have successfully updated your email preferences."

Email Survey

Supported in emails

HubL 
{% module "email_survey" path="@hubspot/email_survey" %}
Parameter name Type Default value
survey survey { "survey_type": "CES" }
sub_font font { "size": 14, "size_unit": "px", "color": "#444444", "styles": {}, "font": "arial, helvetica, sans-serif", "fallback": null, "variant": null, "font_set": "DEFAULT" }
main_font font { "size": 16, "size_unit": "px", "color": "#444444", "styles": { "font-weight": "bold" }, "font": "arial, helvetica, sans-serif", "fallback": null, "variant": null, "font_set": "DEFAULT" }
align choice "left"

View As Web Page

Supported in emails

HubL 
{% module "email_view_as_web_page" path="@hubspot/email_view_as_web_page" %}
Parameter name Type Default value
html richtext <div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{ secondary_font_color }};">Not rendering correctly? View this email as a web page <a target="_blank" href="{{ view_as_page_url }}" style="color: {{ secondary_font_color }}; text-decoration: underline; white-space: nowrap;" data-viewaswebpage="true">here</a>.</div>

Web version link

Supported in emails

Parameter name Type Default value
hs_enable_module_padding boolean false
font font { "size": { "value": 12, "units": "px" }, "color": "#00a4bd", "styles": { "bold": false, "italic": false, "underline": true }, "font": "arial, helvetica, sans-serif" }
align choice "right"
side_padding boolean false

Follow Me

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "follow_me" path="@hubspot/follow_me" %}
Parameter name Type Default value
title text -
links boolean true

Follow Me - Email

Supported in emails

HubL 
{% module "follow_me_email" path="@hubspot/follow_me_email" %}
Parameter name Type Default value
social List of { network (choice), url (text), network_image (image), supporting_text (text) } [ { "network": "facebook" } ]
display choice "icon"
scale number 25
spacing number 5
alignment choice "center"
color_scheme choice "color"
icon_shape choice "circle"
font_style font { "size": { "value": 14, "units": "px" }, "color": "#2696be", "styles": { "bold": false, "italic": false, "underline": false }, "font": "helvetica" }

Follow Me - LP

Supported in pages, blog listings, and blog posts

HubL 
{% module "follow_me_lp" path="@hubspot/follow_me_lp" %}
Parameter name Type Default value
social List of { network (choice), link (link), network_image (image), supporting_text (text) } [ { "network": "facebook" } ]
display choice "icon"
scale number 25
spacing number 5
alignment choice "center"
color_scheme choice "color"
icon_shape choice "circle"
font_style font { "size": { "value": 14, "units": "px" }, "color": "#2696be", "styles": { "bold": false, "italic": false, "underline": false }, "font": "helvetica" }

Form

Supported in pages, blog posts, and blog listings

HubL 
{% module "form" path="@hubspot/form" %}
Parameter name Type Default value
title text ""
form form { "form_id": "", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" }
notifications_are_overridden boolean false
notifications_override_email_addresses email -
follow_up_type_automation boolean false
form_follow_ups_workflow_id workflow -
follow_up_type_simple boolean false
simple_email_for_live_id followupemail -
sfdc_campaign salesforcecampaign -

Image Gallery

Supported in pages, blog posts, and blog listings

Parameter name Type Default value
slides List of { img (image), show_caption (boolean), caption (richtext), link_url (text), open_in_new_tab (boolean) } [ { "show_caption": false, "open_in_new_tab": false } ]
display_mode choice "standard"
lightboxRows number 3
loop_slides boolean true
auto_advance boolean true
num_seconds number 5
show_pagination boolean true
sizing choice "static"
transition choice "slide"
caption_position choice "below"

Header

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "header" path="@hubspot/header" %}
Parameter name Type Default value
value text "A clear and bold header"
header_tag choice "h1"

Horizontal Spacer

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "horizontal_spacer" path="@hubspot/horizontal_spacer" %}

Image (email)

Supported in emails

HubL 
{% module "image_email" path="@hubspot/image_email" %}
Parameter name Type Default value
img image -
hs_enable_module_padding boolean true
link text -
alignment choice "center"

Language Switcher

Supported in pages

HubL 
{% module "language_switcher" path="@hubspot/language_switcher" %}
Parameter name Type Default value
display_mode choice "localized"

Image

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "linked_image" path="@hubspot/linked_image" %}
Parameter name Type Default value
img image { "src": "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png", "alt": "placeholder_200x200", "width": 200, "height": 200 }
link text ""
target boolean false

Supported in pages, blog listings, blog posts, and emails

Parameter name Type Default value
img logo { "override_inherited_src": false, "src": null, "alt": null }
link text -
open_in_new_tab boolean false

Meetings

Supported in pages, blog posts, and blog listings

HubL 
{% module "meetings" path="@hubspot/meetings" %}
Parameter name Type Default value
meeting meeting -
select_meeting_title text "No meeting selected"
select_meeting_description text "Select an existing meeting from the sidebar, or create a new one by navigating to the Meetings tool"

Menu

Supported in pages, blog posts, and blog listings

HubL 
{% module "menu" path="@hubspot/menu" %}
Parameter name Type Default value
id menu -
root_type choice "site_root"
max_levels choice "2"
flow choice "horizontal"
flyouts boolean true

Page Footer

Supported in pages, blog listings, and blog posts

HubL 
{% module "page_footer" path="@hubspot/page_footer" %}

Password Prompt

Supported in pages, blog posts, and blog listings

HubL 
{% module "password_prompt" path="@hubspot/password_prompt" %}
Parameter name Type Default value
submit_button_text text "Submit"
password_placeholder text "Password"
bad_password_message richtext Sorry, please try again.

Post Filter

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "post_filter" path="@hubspot/post_filter" %}
Parameter name Type Default value
select_blog blog -
filter_type choice "tag"
order_by choice "post_count"
list_title text "Posts by Tag"
max_links number 5
expand_link_text text "See all"

Post Listing

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "post_listing" path="@hubspot/post_listing" %}
Parameter name Type Default value
select_blog blog -
listing_type choice "recent"
list_title text "Recent Posts"
max_links number 5

HTML - email

Supported in emails

HubL 
{% module "raw_html_email" path="@hubspot/raw_html_email" %}
Parameter name Type Default value
html html <p> Add custom HTML to your email. </p>
hs_enable_module_padding boolean true

Rich Text

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "rich_text" path="@hubspot/rich_text" %}
Parameter name Type Default value
html richtext <h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're <a href="#">offering</a>, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul>

RSS Listing

Supported in pages, blog listings, and blog posts

HubL 
{% module "rss_listing" path="@hubspot/rss_listing" %}
Parameter name Type Default value
title text "Test"
rss_feed_type choice "blog"
rss_url text -
content_group_id blog -
topic_id tag ""
number_of_items number 5
include_featured_image boolean false
show_author boolean true
attribution_text text "by"
show_detail boolean true
limit_to_chars number 200
click_through_text text "Read more"
show_date boolean true
publish_date_format choice "short"
publish_date_text text "posted at"

Site Search Input

Supported in pages, blog posts, and blog listings

HubL 
{% module "search_input" path="@hubspot/search_input" %}
Parameter name Type Default value
field_label text -
placeholder text "Search"
include_search_button boolean false
content_types { website_pages (boolean), landing_pages (boolean), blog_posts (boolean), knowledge_articles (boolean) } { "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false }

Search Results

Supported in pages, blog posts, and blog listings

HubL 
{% module "search_results" path="@hubspot/search_results" %}
Parameter name Type Default value
display_featured_images boolean false

Section Header

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "section_header" path="@hubspot/section_header" %}
Parameter name Type Default value
header text "A clear and bold header"
subheader text "A more subdued subheader"

Simple Menu

Supported in pages, blog listings, and blog posts

HubL 
{% module "simple_menu" path="@hubspot/simple_menu" %}
Parameter name Type Default value
menu_tree simplemenu []
orientation choice "vertical"

Social Sharing

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "social_sharing" path="@hubspot/social_sharing" %}
Parameter name Type Default value
link text -
facebook { enabled (boolean), custom_link_format (text) } { "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u=" }
twitter { enabled (boolean), custom_link_format (text) } { "enabled": false, "custom_link_format": "https://twitter.com/intent/tweet?original_referer=&url=&source=tweetbutton&text=" }
linkedin { enabled (boolean), custom_link_format (text) } { "enabled": false, "custom_link_format": "http://www.linkedin.com/shareArticle?mini=true&url=" }
pinterest { enabled (boolean), custom_link_format (text), pinterest_media (image) } { "enabled": false, "custom_link_format": "http://pinterest.com/pin/create/button/?url=&media=", "pinterest_media": { "src": "", "alt": null } }
email { enabled (boolean), custom_link_format (text) } { "enabled": false, "custom_link_format": "mailto:?subject=Check out &body=Check out " }

One Line of Text

Supported in pages, blog listings, blog posts, and emails

HubL 
{% module "text" path="@hubspot/text" %}
Parameter name Type Default value
value text "Some additional information in one line"

Video

Supported in pages, blog listings, and blog posts

HubL 
{% module "video" path="@hubspot/video" %}
Parameter name Type Default value
video_type choice "embed"
hubspot_video videoplayer -
embed_field embed -
oembed_thumbnail image -
style_options { oembed_thumbnail_play_button_color (color) } {'oembed_thumbnail_play_button_color':'#ffffff'}
placeholder_fields { placeholder_title (text), placeholder_description (text) } {'placeholder_title':'No video selected', 'placeholder_description':'Select a video type in the sidebar.'}

Video Email

Supported in emails

HubL 
{% module "video_email" path="@hubspot/video_email" %}
Parameter name Type Default value
video_type choice "embed"
hubspot_video videoplayer -
embed embed { "source_type": "oembed" }
oembed_thumbnail image { "size_type": "exact" }
style_options { play_button_color (color), play_button_scale (number) } { {'play_button_color':{ 'color':'#2f4254', 'opacity':100},'play_button_scale' : 30} }
stretch_on_mobile boolean false
alignment choice "center"
hs_enable_module_padding boolean true

Video Embed Lp

Supported in pages

HubL 
{% module "video_embed_lp" path="@hubspot/video_embed_lp" %}
Parameter name Type Default value
url text "https://www.youtube.com/watch?v=X1Rr5BFO5rg"
is_full_width choice "true"
max_width number 800
max_height number 450