Summit Documentation

Everything you need to set up Summit and build pages with it, from your first page to every module and section.

Getting started

1. Install Summit

Get Summit from the HubSpot Template Marketplace. It's added to your account automatically, so there's nothing to upload.

2. Make Summit your active theme

Go to Brand → Brand Identity. In the Brand theme section, click Change theme, select Summit and set it as your active theme.

3. Set your brand

Before you build pages, set your colours, fonts and button styles once. Every page and module uses them.

In the same Brand theme section, click Edit / Preview. See Theme settings below for what each option controls.

4. Create your first page

  1. Go to Content → Website Pages and click Create → Website page.
  2. Choose Summit as the theme.
  3. Pick a template. Home, About, Services, Pricing, FAQs and Contact all come with sample content you can edit.
  4. Name the page and start editing.

5. Set up your header and footer

Your logo, menu and footer links are shared across every page. Edit them once and the change shows up everywhere. See Header, footer and navigation.

Tip: Every template includes placeholder images and text. Replace them before you publish.

Theme settings

Open them from Brand → Brand Identity → Brand theme → Edit / Preview.

How settings connect. Summit's settings run from general to specific. The groups at the top (Global colors, Global CTA, Global fonts) set the starting values for the groups further down. Change a global colour and everything using it updates, unless you've already changed that item directly in its own group. Once you change a specific setting, it keeps your value even if the global one changes later.

Start with the three global groups. For most brands, that's all you need.

Global colors

Your brand palette.

Setting Used for by default
Primary Table headers, number counters, and as the base for several module colours
Secondary Quote (blockquote) accent line
Tertiary Testimonial slider details
Accent 1 Light section and card backgrounds
Accent 2 Form and field backgrounds, alternate section backgrounds
Accent 3 Footer background
CTA Button Color Default button colour (feeds Global CTA)
CTA Button Hover Color Default button colour on hover
White / Black Header background, footer text, and text on dark backgrounds

Global CTA

Button colours used across the site.

  • Primary CTA: the main button. Background, text, and both on hover.
  • Secondary CTA: the alternative button style. Same four options.
  • Line CTA: text-style links with an arrow. Text colour and hover colour.

Global fonts

  • Primary: headings (H1–H6), plus menu and table text colour.
  • Secondary: body text, links, buttons and forms.

Spacing

  • Vertical spacing: the space above and below each section on a page.
  • Maximum content width: how wide content can get on large screens.

Text

Size, weight and colour for each heading level (H1–H6), body text and links. These start from Global fonts.

Links → Hover style sets how text links react on hover: an animated underline (the default), a static underline, or a colour change only. Visitors who've turned on reduced motion on their device always see the static underline.

Buttons

Text, background, border, corner rounding, padding and hover style for the main button. These start from Global CTA → Primary CTA.

Forms

Styles for HubSpot forms: title, labels, help text, fields, the submit button and the form background.

Tables

Header, body, footer and cell borders for tables added in rich text.

Website header

Menu text colour (including dropdowns) and header background.

Website footer

Footer text colour and background.

Templates

When you create a page, pick the template closest to what you need. Every template is fully editable: add, remove or reorder modules and sections.

Template Best for What's on it
Home Your homepage Hero banner, services with icons, text and image blocks, testimonials, call to action
About Company or "who we are" pages Intro text, text and image, icon grid, team section, call to action
Services An overview of what you offer Intro with button, text and image, icon grid, logo band, testimonials, call to action
Services Detail Default One page per service Intro with button, card grid, dark services section, text and image
Pricing Plans and prices Pricing cards, testimonials, FAQ accordion
FAQs Questions and answers Intro text, accordion, call to action
Contact Contact and enquiry pages Form, text, card grid for other ways to get in touch
Thank You Page After a form is submitted Confirmation text and a card grid of next steps
Basic Page A general page with a strong opening Hero banner, services with icons, number counter, call to action
Default Page Text-heavy pages such as policies Heading, a rich text area and a button
Basic Landing Page Campaign pages Simplified header and footer with no main menu, so visitors stay focused on your offer
Blog Listing Your blog's main page List of posts, plus tag and author pages
Blog Post Individual posts Your post content

System pages

Summit also styles HubSpot's system pages, so they match the rest of your site: 404 (page not found), 500 (server error), password prompt, search results, membership login, registration and password reset, and email subscription pages.

To use them, go to Settings → Content → Pages → System pages and select the Summit version of each.

Modules

Modules are the building blocks of every page. In the page editor, click Add to drag a module onto the page, then click it to edit its content. Most modules have a Content tab for text, images and links, and a Styles tab for colours, alignment and spacing.

Hero Banner

A large opening section with a heading, text, an optional button and an image beside it.

  • Hero Content: your heading and intro text.
  • Image: the picture beside the text.
  • Add CTA Button: switch on to show a button. Choose a standard link, or a HubSpot CTA.
  • Styles: content width and text alignment, set separately for desktop and mobile.

Two Column Text and Image

Text on one side, an image on the other.

  • Content: your heading and text, with an optional button (primary or text link with arrow).
  • Image: the picture.
  • Column Reverse: switch on to put the image on the left on desktop.

Three Column Card Grid

Cards in rows of three, each with an icon or image, title, short text and optional button.

  • Image or Icon: choose whether cards show an icon or a larger image.
  • Card Grid: add, remove and reorder cards.
  • Text Color – White, Card Box Shadow, Image Border Radius: switch on for dark backgrounds, shadows and rounded images.

Two Column Icon Grid

Like the card grid, but two per row with an icon, title, text and optional button.

Custom Rich Text

A text area for headings, paragraphs, lists, tables and images. Use the Styles tab to set alignment and maximum width.

Styled Button

A single button. Choose Primary, Secondary or Inline (a text link with an arrow), then set the text and link.

Call to Action

A banner with text and a button, often at the bottom of a page.

  • Rich text: your heading and message.
  • CTA Type: primary or secondary button.
  • Styles: background colour, gradient or image, and padding.

Accordion

Expandable questions and answers.

  • Heading: optional title above the list (H2 or H3).
  • Accordion List: add a title and content for each item.

Form with Heading

Shows a HubSpot form with an optional title and description.

  • Select Form: pick any form from your HubSpot account.

Pricing Card

One plan: name, price, timeframe (such as "/month"), a feature list and a button. Place two or three side by side.

Testimonial Slider

Rotating customer quotes.

  • Layout Choice: single column or two column.
  • Client Quote: add a quote, name, job title and photo for each.
  • Styles: autoplay and dot colours.

Number Counter

Highlight key numbers, such as "99%" or "50+". Each has a number, a suffix and a description.

Logo Band

A row of client or partner logos. Add as many as you need.

Team

Team member cards with a photo, details and social links.

Social Follow

Icons linking to your social accounts. Choose from Facebook, X (Twitter), Instagram, LinkedIn, YouTube, Pinterest, WhatsApp, email, website or a custom icon.

Blog Listing

Used on the Blog Listing template to show your posts. You can change the tag header and "read more" text.

Website Header and Website Footer

Your site-wide header and footer. See Header, footer and navigation.

Landing Page Header and Landing Page Footer

The simplified header (logo and an optional link) and footer (logo, copyright and social links) used on the Basic Landing Page template.

Sections

Sections are ready-made groups of modules, laid out and styled. In the page editor, click Add, open Sections, and drag one onto your page. Once it's placed, edit each module inside it as normal.

Section What it is
Hero Banner Two-column opening with text, button and image
Simple Two Column Image and Text Text and image side by side, with a button
Three Column Services With Icon Three service cards with icons
Three Column Services With Graphics Three service cards with images
Three Column Services With Graphics For Dark Background The same, styled for a dark background
Two Column Form and Text A form beside supporting text
Pricing Pricing cards ready to fill in
Meet Our Team Team member cards
Testimonial Slider Rotating customer quotes
Call to Action Centred text and button on a background image

Header, footer and navigation

The header and footer are shared across every page that uses them. Edit them once and the change appears everywhere.

Editing the header or footer

Open any Summit page in the editor and click the header or footer. Edit it as global content. Your changes apply to every page when you publish.

Header

  • Logo: upload your logo and set where it links.
  • Navigation source: choose HubSpot menu to use a menu from Settings → Content → Navigation menus, or Manual links to type the links in directly.
  • Sub-navigation: with manual links, switch on Add Sub-Nav under any item to create a dropdown.
  • CTA button: switch on Add CTA Nav to show a button at the right of the header, such as "Book a demo".
  • Styles: logo width for desktop and mobile.

On smaller screens, the menu collapses into a mobile menu.

Footer

  • Logo: your footer logo and link.
  • Link columns: add as many columns as you need, each with an optional title. Fill each one from a HubSpot menu or with manual links.
  • Copyright: your copyright line. 2026 is replaced with the current year.
  • Social links: icons and links to your social accounts.

Landing pages

The Basic Landing Page template uses a simplified header and footer with no main menu. They're shared across all your landing pages, but separate from your main header and footer, so editing one doesn't change the other.

Language switcher

If your site has translated pages, a language switcher appears at the bottom of the footer so visitors can change language. It shows only on pages that have a translation, so there's nothing to set up: add a translation to a page in HubSpot and the switcher appears on it.

Blog setup

  1. Go to Settings → Content → Blog.
  2. Select your blog, then open the Templates tab.
  3. Set the listing page template to Summit → Blog Listing and the post template to Summit → Blog Post.
  4. Save. Your blog now uses Summit's styles, header and footer.

Requirements and limitations

  • HubSpot plan: Summit works on all Content Hub plans. A few features need a paid plan:
    • Site search results page: needs a paid Content Hub plan.
    • HubSpot CTAs: the Hero Banner's HubSpot CTA option and "Call to action" link types need a paid plan.
    • Membership pages: login, registration and password reset need Content Hub Professional or Enterprise.
  • Responsive design: every template and module adapts to desktop, tablet and mobile.
  • Fonts: Summit uses Google Fonts (Lora and Geist by default). Change them in Theme settings → Global fonts.

Support

Need help? Email info@vaulted.co.

To help us answer quickly, include:

  • Your HubSpot account (portal) ID
  • A link to the page you're working on
  • A screenshot of the issue

Summit is provided under the licence included with the theme.

Changelog

Version Date Changes
1.0.0 Unreleased Initial HubSpot Marketplace release