Module reference¶

A short entry for each of the 26 modules, in the same groups as the overview. Settings that every module shares (Background, Spacing, Layout, Card, Anchors) are explained once on the overview page and are not repeated here.

Banners¶

A centered hero with a tag, title, description and buttons.

Background: color, gradient, image or video. The video file is chosen in the Content tab.
Title highlight: None or Line under word, with thickness, distance and color.
Use it for: the top of a page.

A hero with a text column and a media column.

Text side: tag, title, description, a one-column feature list and buttons.
Media side: an image or a video poster.
Background: color, gradient or image.

Content¶

Section Title¶

A heading block to introduce the sections below it: tag, title, description and buttons. Includes the same title highlight as the banners.

Content Card¶

Cards that each hold an image, tag, title, description and button.

View: grid or slider. Slider settings have arrows and dots.
Columns: set per screen size, with the gap.
Image: can be switched off with Show image.

Content and Media¶

Text beside one image or one video.

Text: tag, title, description, a feature list and buttons.
Media: one image, or a video from YouTube, Vimeo or HubSpot. Ratio, position, round corner, shadow and border are set in the Style tab.
Split: the share of each side, the order, vertical alignment and whether the media goes first on mobile.

Features¶

Cards with an icon, title, description and button. Each part has its own show switch. Icons come from the HubSpot icon library, or you upload your own.

Accordion¶

Questions that open and close.

Opening one closes the others.
The first item can start open.
Each item has its own background, border, round corner, shadow and padding.

Tab¶

Horizontal tabs. Each tab has a tab title, title, description and button. On mobile the tabs turn into a select box.

Steps¶

Numbered steps. The numbers are added for you. Each step has an icon, title, description and button.

Counter¶

Animated numbers that count up when they scroll into view. Each has an optional prefix and suffix (for example $ or +), a title and a description. Turn the count-up off with Applied counter effect on number.

Video Embed¶

A video with a poster image, a play button and a caption.

Video: aspect ratio, round corner, shadow, poster position and overlay.
Play button: icon size, colors, round corner and hover scale.
Caption: a heading level or a paragraph, weight, color and maximum width.

Proof¶

Testimonial - Slider¶

Reviews with the author's photo, name and designation.

Slider: Loop or Slide, with arrows and/or dots.
Columns: the default is one review at a time.
Quote sign: an optional quote mark above each review, in four styles.

Logo Slider¶

A row of logos that can slide. Optional tag and title above. Slider controls (arrows, dots) show only when there are more logos than columns.

Team¶

People cards with photo, name, designation, bio and social icons.

Photo: aspect ratio and focal point.
Social icons: from the HubSpot icon library.

Portfolio¶

Project cards with a category tag on the image and a category filter above them.

Conversion¶

Call to Action¶

One centered block that asks for one thing: tag, title, description and buttons.

Card effect is off by default. Turn it on to wrap the block in a card, whose background can be a color, gradient or image.
Dark sections: set the text colors to white yourself, because the section does not change them for you.

Pricing¶

Plan cards.

Each plan: name, price (with prefix and suffix), feature list and a button that is always last and full width.
Highlighted plan: one card with its own background, border, text and icon colors, and a highlight label such as "Most Popular".

Form¶

Shows a HubSpot form you choose in the Content tab.

Form style: Style 1 or Style 2, both defined in Theme settings > Form.
Submit button: full width, or aligned left, center or right.
Spacing: between and under the form fields.

Contact Card¶

Cards for ways to reach you: icon, tag, title, description and a button or link.

Blog¶

See Blog for how the four blog modules fit together.

Blog Listing¶

The page that lists posts. Filter by clickable tags (a select box on small screens), pagination, and headers for author and tag pages.

Blog Recent Post¶

The latest posts of a blog, as cards, on any page. Choose the blog and how many posts.

Blog Post - Recent Post¶

Posts shown below a post page. Same card look as Blog Recent Post. It is a global module, so one set of settings applies to every post.

Blog layout - Classic¶

Holds the settings for the whole post page: title, date, author, featured image, content, share buttons, subscribe form and the previous and next post. Also a global module.

Blog post - Blog Comments¶

The comment list and the comment form under a post. See Blog.

Header and footer¶

The header. Its Content tab has Logo, Menu, Language switcher, Buttons and Search. The mobile menu appears below the Mobile menu breakpoint in Theme settings.

The footer. Three content groups: Brand info (logo, description, contact details, social icons), Nav link columns and Bottom bar (copyright and links).