Documentation

Overview

After installing Euphoria on your HubSpot account, configure brand tokens in Theme Settings, edit the Website header and footer in Global content, then create pages from the included templates.

This documentation covers only features that ship with Euphoria — including detailed module and template references with screenshots, paths, and editor field groups.

Euphoria home template preview — Home template preview — typical first page after install

Requirements

HubSpot CMS Hub Starter or above
A purchase/install of Euphoria on your HubSpot account
Optional for local development: HubSpot CLI v8+

Installation

Marketplace buyers: install Euphoria from the HubSpot Marketplace onto your portal, then open Theme Settings to begin branding.

For local development with the HubSpot CLI:

1. Install the HubSpot CLI

npm install -g @hubspot/cli
hs --version

2. Authenticate your HubSpot account

hs account auth
# Follow the prompts to connect your portal

3. Upload the Euphoria theme

hs cms upload theme Euphoria --account YOUR_ACCOUNT
# Use the account name from hs accounts list

4. Watch for local changes

hs cms watch theme Euphoria --account YOUR_ACCOUNT --initial-upload

First Steps

Theme Settings — Set global colors, fonts, spacing, buttons, and header behavior.
Website header — Add your logo, assign a menu, and set the CTA in Global content.
Website footer — Replace demo columns, contact details, and legal links.
Create pages — Start from Home, About, Services, Portfolio, Landing, or Blog templates.
Connect forms — Assign HubSpot forms on contact and landing modules.
Preview and publish — Check mobile and desktop, then publish.

File Structure

Key folders inside the theme package:

theme/
├── theme.json          # Theme metadata
├── fields.json         # Global theme settings
├── css/                # Stylesheets and tokens
├── js/                 # Theme scripts
├── templates/          # Page and system templates
├── modules/            # Drag-and-drop modules
├── sections/           # Reusable DnD sections
└── images/             # Theme assets and previews

2. Create a child theme first — very important

If you only change Theme Settings and module content, you do not need a child theme. If you will edit HTML, CSS, or JavaScript files, create a child theme so Magazine Makers can ship Euphoria updates without overwriting your custom code.

Open the Design Manager in HubSpot.
Find the Euphoria theme folder.
Create a child theme with a recognizable name for your portal.
Build and customize from the child theme going forward.

Keep brand tokens and copy in Theme Settings and the page editor whenever possible.

Theme Settings

Open Settings › Website › Themes › Customize (or Theme Settings in the page editor). Changes cascade across modules and templates.

Global colors	Primary, secondary, background, foreground, muted
Global fonts	Primary and secondary typefaces (defaults: Bodoni Moda, DM Sans)
Spacing	Vertical spacing, max content width, padding, section spacing
Text	H1–H6, body, and links
Buttons and forms	Shared appearance and hover styles
Website header / footer	Menu, dropdown, and chrome colors
Border radius	Small, medium, large, extra large
Animations	Scroll reveal and duration
Header behavior	Sticky, transparent on load, announcement bar
Header and footer	Website, landing, or none as default site chrome

Website header

The Website header is a global module with logo, primary navigation, CTA, optional sticky and transparent behavior, and an optional announcement bar. Edit it via the orange global content overlay on any page, or from Global content.

Use case	Site-wide navigation chrome for website pages
Path	`modules/global-modules/header.module`
Field groups	Accessibility · Behavior · Announcement bar · Logo · Navigation · CTA · Search · Advanced
Also available	Landing header at `modules/global-modules/header-landing.module`

Good to know

Sticky keeps the bar visible while scrolling.
Transparent on load works best over a full-bleed hero.
Assign menus in HubSpot navigation settings or from the header module fields.
Mobile navigation opens from the menu toggle and uses the same menu structure.

Website footer

The Website footer is a global multi-column module for brand copy, menus, contact details, and supporting links. Landing templates use the Landing footer instead.

Path	`modules/global-modules/footer.module`
Landing footer	`modules/global-modules/footer-landing.module`
Theme Settings	Website footer text and background colors

Modules

Drag-and-drop modules live under theme/modules. Euphoria modules use the eup- prefix. Most include an Advanced group for optional custom CSS class, ID, and inline styles.

Each module below follows the same documentation pattern as premium HubSpot themes (overview, preview screenshot, field groups, and good-to-know notes). Use the Modules sidebar to jump between entries.

Awards List

Reusable Awards List section for pages and landings.

Use case	Reusable Awards List section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-awards-list.module`
Editor field groups	Section header · Layout · Award · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Blog Cards

Featured blog posts on marketing pages.

Use case	Featured blog posts on marketing pages.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-blog-cards.module`
Editor field groups	Section header · Content · Fallback article · Layout · Footer link · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Breadcrumb Strip

Reusable Breadcrumb Strip section for pages and landings.

Use case	Reusable Breadcrumb Strip section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-breadcrumb-marquee.module`
Editor field groups	Content · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Button Variants

Reusable Button Variants section for pages and landings.

Use case	Reusable Button Variants section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-button-variants.module`
Editor field groups	Section header · Buttons · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Card Showcase

Reusable Card Showcase section for pages and landings.

Use case	Reusable Card Showcase section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-card-showcase.module`
Editor field groups	Section header · Cards · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Career Detail

Reusable Career Detail section for pages and landings.

Use case	Reusable Career Detail section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-career-detail.module`
Editor field groups	Breadcrumb · Hero · Job bar · About the role · What you'll do · What we're looking for · Requirements · Benefits sidebar · Application form · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Comparison Table

Reusable Comparison Table section for pages and landings.

Use case	Reusable Comparison Table section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-comparison-table.module`
Editor field groups	Section header · Columns · Row · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Contact Form

Embedded HubSpot forms with supporting copy.

Use case	Embedded HubSpot forms with supporting copy.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-contact-form.module`
Editor field groups	Content · Layout · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Contact

Reusable Contact section for pages and landings.

Use case	Reusable Contact section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-contact.module`
Editor field groups	Form panel · Info panel · Social link · Map · Offices header · Office · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Cookie Preferences

Reusable Cookie Preferences section for pages and landings.

Use case	Reusable Cookie Preferences section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-cookie-preferences.module`
Editor field groups	Section header · Cookie category · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

CTA Banner

Full-width conversion banners.

Use case	Full-width conversion banners.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-cta-banner.module`
Editor field groups	Layout · Content · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

FAQ

Accordion FAQ lists with optional search and filters.

FAQ module preview — FAQ — cropped from live page screenshot

Use case	Accordion FAQ lists with optional search and filters.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-faq.module`
Editor field groups	Section header · Layout · Content · FAQ item · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Feature Grid

Feature or capability card grids.

Use case	Feature or capability card grids.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-feature-grid.module`
Editor field groups	Layout · Section header · Feature · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Hero Slider

Rotating hero slides for home and campaign pages.

Use case	Rotating hero slides for home and campaign pages.
Page speed impact	Medium
Available in pages	Yes
Path	`modules/eup-hero-slider.module`
Editor field groups	Layout · Slide · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Hero

Page openings with headline, media, CTAs, or lead forms.

Use case	Page openings with headline, media, CTAs, or lead forms.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-hero.module`
Editor field groups	Layout · Content · Event detail · Media · Project card · Benefit item · Trust item · Button · Inline stat · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Image Slider

Reusable Image Slider section for pages and landings.

Use case	Reusable Image Slider section for pages and landings.
Page speed impact	Medium
Available in pages	Yes
Path	`modules/eup-image-slider.module`
Editor field groups	Layout · Slide · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Job List

Reusable Job List section for pages and landings.

Use case	Reusable Job List section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-job-list.module`
Editor field groups	Section header · Role · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Link List

Reusable Link List section for pages and landings.

Use case	Reusable Link List section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-link-list.module`
Editor field groups	Section header · Layout · Content · Resource · Footer · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Location Cards

Reusable Location Cards section for pages and landings.

Use case	Reusable Location Cards section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-location-cards.module`
Editor field groups	Section header · Location · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Logo Marquee

Scrolling partner or client logo strip.

Logo Marquee — cropped from live page screenshot

Use case	Scrolling partner or client logo strip.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-logo-marquee.module`
Editor field groups	Settings · Logo · Animation · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Pillar Content

Reusable Pillar Content section for pages and landings.

Use case	Reusable Pillar Content section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-pillar-content.module`
Editor field groups	Sidebar · Article sections · Key takeaways · Free resources · Contact card · Author · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Policy Content

Reusable Policy Content section for pages and landings.

Use case	Reusable Policy Content section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-policy-content.module`
Editor field groups	Section · Contact card · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Portfolio Grid

Project and case-study tile grids.

Use case	Project and case-study tile grids.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-portfolio-grid.module`
Editor field groups	Section header · Layout · Filter · Project · Featured project · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Pricing

Pricing tiers and plan comparison layouts.

Use case	Pricing tiers and plan comparison layouts.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-pricing.module`
Editor field groups	Section header · Billing toggle · Plan · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Process Steps

Numbered process or methodology steps.

Use case	Numbered process or methodology steps.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-process-steps.module`
Editor field groups	Section header · Step · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Progress Bars

Reusable Progress Bars section for pages and landings.

Use case	Reusable Progress Bars section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-progress-bars.module`
Editor field groups	Section header · Skill · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Project Overview

Reusable Project Overview section for pages and landings.

Use case	Reusable Project Overview section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-project-overview.module`
Editor field groups	Content · Details card · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Resource Library

Reusable Resource Library section for pages and landings.

Use case	Reusable Resource Library section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-resource-library.module`
Editor field groups	Toolbar · Resource · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Search Results

Reusable Search Results section for pages and landings.

Use case	Reusable Search Results section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-search-results.module`
Editor field groups	Search · Filters · Related searches · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Sector Tags

Reusable Sector Tags section for pages and landings.

Use case	Reusable Sector Tags section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-sector-tags.module`
Editor field groups	Section header · Sector · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Service Cards

Service offering cards for studio sites.

Use case	Service offering cards for studio sites.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-service-cards.module`
Editor field groups	Section header · Service · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Split Content

Two-column story or feature layouts with media.

Use case	Two-column story or feature layouts with media.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-split-content.module`
Editor field groups	Layout · Content · Media · Button · Inline stats · Secondary link · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Statistics

Numeric proof / KPI sections.

Use case	Numeric proof / KPI sections.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-statistics.module`
Editor field groups	Layout · Section header · Stat · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Team Grid

Studio team member cards.

Use case	Studio team member cards.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-team-grid.module`
Editor field groups	Section header · Layout · Team member · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Team Member Banner

Reusable Team Member Banner section for pages and landings.

Use case	Reusable Team Member Banner section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-team-member-banner.module`
Editor field groups	Content · Skill tag · Social link · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Testimonials

Client quotes and social proof sections.

Use case	Client quotes and social proof sections.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-testimonials.module`
Editor field groups	Section header · Layout · Testimonial · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Timeline

Chronological milestones and history.

Use case	Chronological milestones and history.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-timeline.module`
Editor field groups	Section header · Milestone · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Token Scale

Reusable Token Scale section for pages and landings.

Use case	Reusable Token Scale section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-token-scale.module`
Editor field groups	Section header · Spacing steps · Radius steps · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Type Scale

Reusable Type Scale section for pages and landings.

Use case	Reusable Type Scale section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/eup-type-scale.module`
Editor field groups	Section header · Type specimens · Advanced

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Toggle Section header to show or hide eyebrow, heading, and supporting text.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Video Demo

Embedded or lightbox video demos.

Use case	Embedded or lightbox video demos.
Page speed impact	Medium
Available in pages	Yes
Path	`modules/eup-video-demo.module`
Editor field groups	Layout · Content · Media · Video · Advanced · Styles

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Use the Advanced group for custom CSS class, ID, or inline styles on the module wrapper.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

footer.module

Global multi-column website footer.

Use case	Global multi-column website footer.
Page speed impact	Low
Available in pages	Yes
Path	`modules/footer.module`
Editor field groups	Content fields in module editor

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Landing footer

Compact landing-page footer.

Use case	Compact landing-page footer.
Page speed impact	Low
Available in pages	Yes (global module)
Path	`modules/global-modules/footer-landing.module`
Editor field groups	Brand · Subscribe · Bottom bar

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Global module — edit once via the orange global overlay or Global content; changes apply site-wide.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Footer

Global multi-column website footer.

Use case	Global multi-column website footer.
Page speed impact	Low
Available in pages	Yes (global module)
Path	`modules/global-modules/footer.module`
Editor field groups	Brand column · Social links · Menu columns · Contact row · Bottom bar · Organization schema

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Global module — edit once via the orange global overlay or Global content; changes apply site-wide.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Landing header

Simplified landing header with logo and CTA.

Use case	Simplified landing header with logo and CTA.
Page speed impact	Low
Available in pages	Yes (global module)
Path	`modules/global-modules/header-landing.module`
Editor field groups	Logo · CTA button

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Global module — edit once via the orange global overlay or Global content; changes apply site-wide.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Website header

Global website header with logo, menu, CTA, and announcement bar.

Use case	Global website header with logo, menu, CTA, and announcement bar.
Page speed impact	Low
Available in pages	Yes (global module)
Path	`modules/global-modules/header.module`
Editor field groups	Accessibility · Behavior · Announcement bar · Logo · Navigation · Search · Language switcher · Header CTA · Mobile CTA

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Global module — edit once via the orange global overlay or Global content; changes apply site-wide.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

header.module

Global website header with logo, menu, CTA, and announcement bar.

Use case	Global website header with logo, menu, CTA, and announcement bar.
Page speed impact	Low
Available in pages	Yes
Path	`modules/header.module`
Editor field groups	Content fields in module editor

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

pricing-card.module

Reusable pricing-card.module section for pages and landings.

Use case	Reusable pricing-card.module section for pages and landings.
Page speed impact	Low
Available in pages	Yes
Path	`modules/pricing-card.module`
Editor field groups	Content fields in module editor

Good to know

Edit content in the page editor. Visibility rules show only relevant fields based on layout choices.
Prefer Theme Settings for brand colors and type; override only when a single section needs a different treatment.

Templates

Page templates are ready-made layouts under theme/templates. Create a page from a template in HubSpot, then replace demo content. Screenshots below are the theme template previews.

Home

Primary homepage layout with hero, proof, and featured work.

Use case	Primary homepage layout with hero, proof, and featured work.
Template file	`templates/home.html`
Available for new content	Yes

Home Minimal

Quieter homepage for studios that want less chrome above the fold.

Use case	Quieter homepage for studios that want less chrome above the fold.
Template file	`templates/home-minimal.html`
Available for new content	Yes

Home Slider

Homepage built around the hero slider module.

Use case	Homepage built around the hero slider module.
Template file	`templates/home-slider.html`
Available for new content	Yes

Home Full Bleed

Full-bleed visual homepage opening.

Use case	Full-bleed visual homepage opening.
Template file	`templates/home-full-bleed.html`
Available for new content	Yes

About

Studio about page with story and proof sections.

Use case	Studio about page with story and proof sections.
Template file	`templates/about.html`
Available for new content	Yes

About Story

Narrative about layout focused on studio history.

Use case	Narrative about layout focused on studio history.
Template file	`templates/about-story.html`
Available for new content	Yes

About Culture

Culture and values focused about page.

Use case	Culture and values focused about page.
Template file	`templates/about-culture.html`
Available for new content	Yes

About Stats

About page led by statistics and outcomes.

Use case	About page led by statistics and outcomes.
Template file	`templates/about-stats.html`
Available for new content	Yes

Services

Services overview with service cards and process.

Use case	Services overview with service cards and process.
Template file	`templates/services.html`
Available for new content	Yes

Service Detail

Single service deep-dive page.

Use case	Single service deep-dive page.
Template file	`templates/service-detail.html`
Available for new content	Yes

Solutions

Solutions overview marketing page.

Use case	Solutions overview marketing page.
Template file	`templates/solutions.html`
Available for new content	Yes

Industries

Industry or sector overview page.

Use case	Industry or sector overview page.
Template file	`templates/industries.html`
Available for new content	Yes

Portfolio

Project listing / portfolio grid.

Use case	Project listing / portfolio grid.
Template file	`templates/portfolio.html`
Available for new content	Yes

Portfolio Detail

Individual project detail layout.

Use case	Individual project detail layout.
Template file	`templates/portfolio-detail.html`
Available for new content	Yes

Case Studies

Case study listing page.

Use case	Case study listing page.
Template file	`templates/case-studies.html`
Available for new content	Yes

Case Study

Long-form case study / project narrative.

Use case	Long-form case study / project narrative.
Template file	`templates/case-study.html`
Available for new content	Yes

Team

Team directory with member cards.

Use case	Team directory with member cards.
Template file	`templates/team.html`
Available for new content	Yes

Team Member

Individual team member profile.

Use case	Individual team member profile.
Template file	`templates/team-member.html`
Available for new content	Yes

Careers

Open roles listing.

Use case	Open roles listing.
Template file	`templates/careers.html`
Available for new content	Yes

Career Detail

Single job posting layout.

Use case	Single job posting layout.
Template file	`templates/career-detail.html`
Available for new content	Yes

Testimonials

Dedicated testimonials marketing page.

Use case	Dedicated testimonials marketing page.
Template file	`templates/testimonials.html`
Available for new content	Yes

Pricing

Pricing and plans marketing page.

Use case	Pricing and plans marketing page.
Template file	`templates/pricing.html`
Available for new content	Yes

Contact

Primary contact page with form.

Use case	Primary contact page with form.
Template file	`templates/contact.html`
Available for new content	Yes

Contact Centered

Centered contact layout.

Use case	Centered contact layout.
Template file	`templates/contact-centered.html`
Available for new content	Yes

Contact Locations

Multi-location contact page.

Use case	Multi-location contact page.
Template file	`templates/contact-locations.html`
Available for new content	Yes

Landing Page

Conversion landing page with landing header/footer.

Use case	Conversion landing page with landing header/footer.
Template file	`templates/landing-page.html`
Available for new content	Yes

Landing Audit

Audit offer landing page.

Use case	Audit offer landing page.
Template file	`templates/landing-audit.html`
Available for new content	Yes

Landing Masterclass

Masterclass or webinar landing page.

Use case	Masterclass or webinar landing page.
Template file	`templates/landing-masterclass.html`
Available for new content	Yes

Landing Playbook

Playbook download landing page.

Use case	Playbook download landing page.
Template file	`templates/landing-playbook.html`
Available for new content	Yes

Landing Trial

Trial signup landing page.

Use case	Trial signup landing page.
Template file	`templates/landing-trial.html`
Available for new content	Yes

FAQ

FAQ listing page with search and filters.

FAQ template preview — FAQ — above-the-fold preview

Use case	FAQ listing page with search and filters.
Template file	`templates/faq.html`
Available for new content	Yes

Theme documentation guide page.

Use case	Theme documentation guide page.
Template file	`templates/documentation.html`
Available for new content	Yes

Resources

Resource library / content hub.

Use case	Resource library / content hub.
Template file	`templates/resources.html`
Available for new content	Yes

Downloads

Downloadable assets grid.

Use case	Downloadable assets grid.
Template file	`templates/downloads.html`
Available for new content	Yes

Style Guide

Design tokens and component samples.

Use case	Design tokens and component samples.
Template file	`templates/style-guide.html`
Available for new content	Yes

Privacy Policy

Privacy policy legal page.

Use case	Privacy policy legal page.
Template file	`templates/privacy.html`
Available for new content	Yes

Terms of Use

Terms of use legal page.

Use case	Terms of use legal page.
Template file	`templates/terms.html`
Available for new content	Yes

Pillar Page

Long-form pillar content with sidebar nav.

Use case	Long-form pillar content with sidebar nav.
Template file	`templates/pillar.html`
Available for new content	Yes

Blog Index

Blog listing template.

Use case	Blog listing template.
Template file	`templates/blog-index.html`
Available for new content	Yes

Blog Magazine

Magazine-style blog listing.

Use case	Magazine-style blog listing.
Template file	`templates/blog-magazine.html`
Available for new content	Yes

Blog Sidebar

Blog listing with sidebar.

Use case	Blog listing with sidebar.
Template file	`templates/blog-sidebar.html`
Available for new content	Yes

Blog Post

Standard blog post template.

Use case	Standard blog post template.
Template file	`templates/blog-post.html`
Available for new content	Yes

Blog Post Full

Full-width blog post layout.

Use case	Full-width blog post layout.
Template file	`templates/blog-post-full.html`
Available for new content	Yes

Blog Post Minimal

Minimal blog post layout.

Use case	Minimal blog post layout.
Template file	`templates/blog-post-minimal.html`
Available for new content	Yes

Blog Author

Author archive template.

Use case	Author archive template.
Template file	`templates/blog-author.html`
Available for new content	Yes

Blog Category

Category archive template.

Use case	Category archive template.
Template file	`templates/blog-category.html`
Available for new content	Yes

Blog Setup

Assign a listing template (Blog Index, Magazine, or Sidebar).
Assign a post template (standard, full, or minimal).
Use Author and Category templates for author hubs and category archives when needed.
Feature posts on marketing pages with the Blog Cards module.

System Pages

Assign Euphoria system templates under HubSpot system page settings so visitors stay on-brand for errors, search, membership, and subscriptions.

Search	`templates/system/search-results.html`
Errors	404.html · 500.html
Membership	login · register · password reset
Subscriptions	preferences · confirmation · backup unsubscribe

FAQ

Where do I change the logo and menu?
Edit the Website header in Global content.

How do I use a landing header?
Create a page from a landing template, or set Theme Settings › Header and footer to Landing.

Can I customize colors and fonts globally?
Yes — Theme Settings cascades colors, fonts, spacing, buttons, forms, radius, and animations.

Should I use a child theme?
Yes if you edit theme files. Not required for Theme Settings and editor content alone.

More questions are answered on the FAQ page.

Support and Licensing

Euphoria is built by Magazine Makers. Licensed customers can email hello@magazinemakers.com for setup questions, documented feature guidance, and defect reports. We typically respond within one business day.

A purchase licenses Euphoria for use on a single HubSpot account per HubSpot Marketplace rules. Updates are included for licensed accounts.

A downloadable PDF is available in the theme repository docs/ folder.

Documentation

Getting Started with Euphoria

Overview

Requirements

Installation

First Steps

File Structure

2. Create a child theme first — very important

Theme Settings

Website header

Good to know

Website footer

Modules

Awards List

Good to know

Blog Cards

Good to know

Breadcrumb Strip

Good to know

Button Variants

Good to know

Card Showcase

Good to know

Career Detail

Good to know

Comparison Table

Good to know

Contact Form

Good to know

Contact

Good to know

Cookie Preferences

Good to know

CTA Banner

Good to know

FAQ

Good to know

Feature Grid

Good to know

Hero Slider

Good to know

Hero

Good to know

Image Slider

Good to know

Job List

Good to know

Link List

Good to know

Location Cards

Good to know

Logo Marquee

Good to know

Pillar Content

Good to know

Policy Content

Good to know

Portfolio Grid

Good to know

Pricing

Good to know

Process Steps

Good to know

Progress Bars

Good to know

Project Overview

Good to know

Resource Library

Good to know

Search Results

Good to know

Sector Tags

Good to know

Service Cards

Good to know

Split Content

Good to know

Statistics

Good to know

Team Grid