--- title: Documentation | Euphoria description: Theme docs for modules, templates, and setup. --- [Skip to content](https://test.codebyaryan.com/euphoria/documentation#main-content) [Euphoria](https://test.codebyaryan.com/euphoria?hsLang=en) - Home Show submenu for Home - [Home (Main)](https://test.codebyaryan.com/euphoria) - [Home Slider](https://test.codebyaryan.com/euphoria/home-slider) - [Home Full Bleed](https://test.codebyaryan.com/euphoria/home-full-bleed) - [Home Minimal](https://test.codebyaryan.com/euphoria/home-minimal) - About Show submenu for About Our Story - [About Overview Who we are and what we stand for](https://test.codebyaryan.com/euphoria/about) - [Our Story How the studio began and grew](https://test.codebyaryan.com/euphoria/about-story) - [Culture Values, process, and how we work](https://test.codebyaryan.com/euphoria/about-culture) - [Impact & Stats Proof points and studio metrics](https://test.codebyaryan.com/euphoria/about-stats) People - [Team Meet partners and specialists](https://test.codebyaryan.com/euphoria/team) - [Team Member Individual profile layout](https://test.codebyaryan.com/euphoria/team-member) - [Careers Open roles at the studio](https://test.codebyaryan.com/euphoria/careers) - [Career Detail Single role with apply CTA](https://test.codebyaryan.com/euphoria/career-detail) Featured - [Client Testimonials POPULAR Trust signals from partners](https://test.codebyaryan.com/euphoria/testimonials) - [Pricing Packages for every studio size](https://test.codebyaryan.com/euphoria/pricing) - [Contact Us NEW Start a project conversation](https://test.codebyaryan.com/euphoria/contact) - Work Show submenu for Work Project - [Portfolio Selected studio projects](https://test.codebyaryan.com/euphoria/portfolio) - [Project Detail Deep-dive project narrative](https://test.codebyaryan.com/euphoria/portfolio-detail) - [Case Studies Client success stories](https://test.codebyaryan.com/euphoria/case-study) - [Case Study Detail Challenge, approach, results](https://test.codebyaryan.com/euphoria/case-studies) By Focus - [Solutions Enterprise-ready website solutions](https://test.codebyaryan.com/euphoria/solutions) - [Industries Architecture, interiors, agencies](https://test.codebyaryan.com/euphoria/industries) - [Pillar Page Long-form SEO content layout](https://test.codebyaryan.com/euphoria/pillar) - [Resources Guides and downloadable assets](https://test.codebyaryan.com/euphoria/resources) Featured - [Full Bleed Home NEW Immersive visual homepage](https://test.codebyaryan.com/euphoria/home-full-bleed) - [Customer Success POPULAR Popular case study grid](https://test.codebyaryan.com/euphoria/case-studies) - [Style Guide Live design system gallery](https://test.codebyaryan.com/euphoria/style-guide) [View all](https://test.codebyaryan.com/euphoria/portfolio) - Services Show submenu for Services - [All Services](https://test.codebyaryan.com/euphoria/services) - [Service Detail](https://test.codebyaryan.com/euphoria/service-detail) - [Solutions](https://test.codebyaryan.com/euphoria/solutions) - [Industries](https://test.codebyaryan.com/euphoria/industries) - [Pricing](https://test.codebyaryan.com/euphoria/pricing) - [Free Audit Landing](https://test.codebyaryan.com/euphoria/landing-audit) - Journal Show submenu for Journal - [Blog](https://test.codebyaryan.com/blog) - [Blog (Magazine)](https://test.codebyaryan.com/journal) - [Blog (Sidebar)](https://test.codebyaryan.com/blog) - [Blog post](https://test.codebyaryan.com/blog/adaptive-reuse-and-the-future-of-heritage) - [Blog post (Minimal)](https://test.codebyaryan.com/journal/what-is-lorem-ipsum) - [Author](https://test.codebyaryan.com/blog/author/aryan-antal) - More Show submenu for More - [Contact](https://test.codebyaryan.com/euphoria/contact) - [Contact Centered](https://test.codebyaryan.com/euphoria/contact-centered) - [Locations](https://test.codebyaryan.com/euphoria/contact-locations) - [FAQ](https://test.codebyaryan.com/euphoria/faq) - [Documentation](https://test.codebyaryan.com/euphoria/documentation) - [Downloads](https://test.codebyaryan.com/euphoria/downloads) - [Style Guide](https://test.codebyaryan.com/euphoria/style-guide) - [Landing Page](https://test.codebyaryan.com/euphoria/landing) - [Masterclass](https://test.codebyaryan.com/euphoria/landing-masterclass) - [Playbook](https://test.codebyaryan.com/euphoria/landing-playbook) - [Free Trial](https://test.codebyaryan.com/euphoria/landing-trial) - [Free Audit](https://test.codebyaryan.com/euphoria/landing-audit) - Home Show submenu for Home - [Home (Main)](https://test.codebyaryan.com/euphoria) - [Home Slider](https://test.codebyaryan.com/euphoria/home-slider) - [Home Full Bleed](https://test.codebyaryan.com/euphoria/home-full-bleed) - [Home Minimal](https://test.codebyaryan.com/euphoria/home-minimal) - About Show submenu for About Our Story - [About Overview Who we are and what we stand for](https://test.codebyaryan.com/euphoria/about) - [Our Story How the studio began and grew](https://test.codebyaryan.com/euphoria/about-story) - [Culture Values, process, and how we work](https://test.codebyaryan.com/euphoria/about-culture) - [Impact & Stats Proof points and studio metrics](https://test.codebyaryan.com/euphoria/about-stats) People - [Team Meet partners and specialists](https://test.codebyaryan.com/euphoria/team) - [Team Member Individual profile layout](https://test.codebyaryan.com/euphoria/team-member) - [Careers Open roles at the studio](https://test.codebyaryan.com/euphoria/careers) - [Career Detail Single role with apply CTA](https://test.codebyaryan.com/euphoria/career-detail) Featured - [Client Testimonials POPULAR Trust signals from partners](https://test.codebyaryan.com/euphoria/testimonials) - [Pricing Packages for every studio size](https://test.codebyaryan.com/euphoria/pricing) - [Contact Us NEW Start a project conversation](https://test.codebyaryan.com/euphoria/contact) - Work Show submenu for Work Project - [Portfolio Selected studio projects](https://test.codebyaryan.com/euphoria/portfolio) - [Project Detail Deep-dive project narrative](https://test.codebyaryan.com/euphoria/portfolio-detail) - [Case Studies Client success stories](https://test.codebyaryan.com/euphoria/case-study) - [Case Study Detail Challenge, approach, results](https://test.codebyaryan.com/euphoria/case-studies) By Focus - [Solutions Enterprise-ready website solutions](https://test.codebyaryan.com/euphoria/solutions) - [Industries Architecture, interiors, agencies](https://test.codebyaryan.com/euphoria/industries) - [Pillar Page Long-form SEO content layout](https://test.codebyaryan.com/euphoria/pillar) - [Resources Guides and downloadable assets](https://test.codebyaryan.com/euphoria/resources) Featured - [Full Bleed Home NEW Immersive visual homepage](https://test.codebyaryan.com/euphoria/home-full-bleed) - [Customer Success POPULAR Popular case study grid](https://test.codebyaryan.com/euphoria/case-studies) - [Style Guide Live design system gallery](https://test.codebyaryan.com/euphoria/style-guide) [View all](https://test.codebyaryan.com/euphoria/portfolio) - Services Show submenu for Services - [All Services](https://test.codebyaryan.com/euphoria/services) - [Service Detail](https://test.codebyaryan.com/euphoria/service-detail) - [Solutions](https://test.codebyaryan.com/euphoria/solutions) - [Industries](https://test.codebyaryan.com/euphoria/industries) - [Pricing](https://test.codebyaryan.com/euphoria/pricing) - [Free Audit Landing](https://test.codebyaryan.com/euphoria/landing-audit) - Journal Show submenu for Journal - [Blog](https://test.codebyaryan.com/blog) - [Blog (Magazine)](https://test.codebyaryan.com/journal) - [Blog (Sidebar)](https://test.codebyaryan.com/blog) - [Blog post](https://test.codebyaryan.com/blog/adaptive-reuse-and-the-future-of-heritage) - [Blog post (Minimal)](https://test.codebyaryan.com/journal/what-is-lorem-ipsum) - [Author](https://test.codebyaryan.com/blog/author/aryan-antal) - More Show submenu for More - [Contact](https://test.codebyaryan.com/euphoria/contact) - [Contact Centered](https://test.codebyaryan.com/euphoria/contact-centered) - [Locations](https://test.codebyaryan.com/euphoria/contact-locations) - [FAQ](https://test.codebyaryan.com/euphoria/faq) - [Documentation](https://test.codebyaryan.com/euphoria/documentation) - [Downloads](https://test.codebyaryan.com/euphoria/downloads) - [Style Guide](https://test.codebyaryan.com/euphoria/style-guide) - [Landing Page](https://test.codebyaryan.com/euphoria/landing) - [Masterclass](https://test.codebyaryan.com/euphoria/landing-masterclass) - [Playbook](https://test.codebyaryan.com/euphoria/landing-playbook) - [Free Trial](https://test.codebyaryan.com/euphoria/landing-trial) - [Free Audit](https://test.codebyaryan.com/euphoria/landing-audit) [Buy Now](https://ecosystem.hubspot.com/marketplace/website/euphoria-theme-by-magazine-makers) [Euphoria](https://test.codebyaryan.com/euphoria?hsLang=en) - Home Show submenu for Home - [Home (Main)](https://test.codebyaryan.com/euphoria) - [Home Slider](https://test.codebyaryan.com/euphoria/home-slider) - [Home Full Bleed](https://test.codebyaryan.com/euphoria/home-full-bleed) - [Home Minimal](https://test.codebyaryan.com/euphoria/home-minimal) - About Show submenu for About Our Story - [About Overview Who we are and what we stand for](https://test.codebyaryan.com/euphoria/about) - [Our Story How the studio began and grew](https://test.codebyaryan.com/euphoria/about-story) - [Culture Values, process, and how we work](https://test.codebyaryan.com/euphoria/about-culture) - [Impact & Stats Proof points and studio metrics](https://test.codebyaryan.com/euphoria/about-stats) People - [Team Meet partners and specialists](https://test.codebyaryan.com/euphoria/team) - [Team Member Individual profile layout](https://test.codebyaryan.com/euphoria/team-member) - [Careers Open roles at the studio](https://test.codebyaryan.com/euphoria/careers) - [Career Detail Single role with apply CTA](https://test.codebyaryan.com/euphoria/career-detail) Featured - [Client Testimonials POPULAR Trust signals from partners](https://test.codebyaryan.com/euphoria/testimonials) - [Pricing Packages for every studio size](https://test.codebyaryan.com/euphoria/pricing) - [Contact Us NEW Start a project conversation](https://test.codebyaryan.com/euphoria/contact) - Work Show submenu for Work Project - [Portfolio Selected studio projects](https://test.codebyaryan.com/euphoria/portfolio) - [Project Detail Deep-dive project narrative](https://test.codebyaryan.com/euphoria/portfolio-detail) - [Case Studies Client success stories](https://test.codebyaryan.com/euphoria/case-study) - [Case Study Detail Challenge, approach, results](https://test.codebyaryan.com/euphoria/case-studies) By Focus - [Solutions Enterprise-ready website solutions](https://test.codebyaryan.com/euphoria/solutions) - [Industries Architecture, interiors, agencies](https://test.codebyaryan.com/euphoria/industries) - [Pillar Page Long-form SEO content layout](https://test.codebyaryan.com/euphoria/pillar) - [Resources Guides and downloadable assets](https://test.codebyaryan.com/euphoria/resources) Featured - [Full Bleed Home NEW Immersive visual homepage](https://test.codebyaryan.com/euphoria/home-full-bleed) - [Customer Success POPULAR Popular case study grid](https://test.codebyaryan.com/euphoria/case-studies) - [Style Guide Live design system gallery](https://test.codebyaryan.com/euphoria/style-guide) [View all](https://test.codebyaryan.com/euphoria/portfolio) - Services Show submenu for Services - [All Services](https://test.codebyaryan.com/euphoria/services) - [Service Detail](https://test.codebyaryan.com/euphoria/service-detail) - [Solutions](https://test.codebyaryan.com/euphoria/solutions) - [Industries](https://test.codebyaryan.com/euphoria/industries) - [Pricing](https://test.codebyaryan.com/euphoria/pricing) - [Free Audit Landing](https://test.codebyaryan.com/euphoria/landing-audit) - Journal Show submenu for Journal - [Blog](https://test.codebyaryan.com/blog) - [Blog (Magazine)](https://test.codebyaryan.com/journal) - [Blog (Sidebar)](https://test.codebyaryan.com/blog) - [Blog post](https://test.codebyaryan.com/blog/adaptive-reuse-and-the-future-of-heritage) - [Blog post (Minimal)](https://test.codebyaryan.com/journal/what-is-lorem-ipsum) - [Author](https://test.codebyaryan.com/blog/author/aryan-antal) - More Show submenu for More - [Contact](https://test.codebyaryan.com/euphoria/contact) - [Contact Centered](https://test.codebyaryan.com/euphoria/contact-centered) - [Locations](https://test.codebyaryan.com/euphoria/contact-locations) - [FAQ](https://test.codebyaryan.com/euphoria/faq) - [Documentation](https://test.codebyaryan.com/euphoria/documentation) - [Downloads](https://test.codebyaryan.com/euphoria/downloads) - [Style Guide](https://test.codebyaryan.com/euphoria/style-guide) - [Landing Page](https://test.codebyaryan.com/euphoria/landing) - [Masterclass](https://test.codebyaryan.com/euphoria/landing-masterclass) - [Playbook](https://test.codebyaryan.com/euphoria/landing-playbook) - [Free Trial](https://test.codebyaryan.com/euphoria/landing-trial) - [Free Audit](https://test.codebyaryan.com/euphoria/landing-audit) - Home Show submenu for Home - [Home (Main)](https://test.codebyaryan.com/euphoria) - [Home Slider](https://test.codebyaryan.com/euphoria/home-slider) - [Home Full Bleed](https://test.codebyaryan.com/euphoria/home-full-bleed) - [Home Minimal](https://test.codebyaryan.com/euphoria/home-minimal) - About Show submenu for About Our Story - [About Overview Who we are and what we stand for](https://test.codebyaryan.com/euphoria/about) - [Our Story How the studio began and grew](https://test.codebyaryan.com/euphoria/about-story) - [Culture Values, process, and how we work](https://test.codebyaryan.com/euphoria/about-culture) - [Impact & Stats Proof points and studio metrics](https://test.codebyaryan.com/euphoria/about-stats) People - [Team Meet partners and specialists](https://test.codebyaryan.com/euphoria/team) - [Team Member Individual profile layout](https://test.codebyaryan.com/euphoria/team-member) - [Careers Open roles at the studio](https://test.codebyaryan.com/euphoria/careers) - [Career Detail Single role with apply CTA](https://test.codebyaryan.com/euphoria/career-detail) Featured - [Client Testimonials POPULAR Trust signals from partners](https://test.codebyaryan.com/euphoria/testimonials) - [Pricing Packages for every studio size](https://test.codebyaryan.com/euphoria/pricing) - [Contact Us NEW Start a project conversation](https://test.codebyaryan.com/euphoria/contact) - Work Show submenu for Work Project - [Portfolio Selected studio projects](https://test.codebyaryan.com/euphoria/portfolio) - [Project Detail Deep-dive project narrative](https://test.codebyaryan.com/euphoria/portfolio-detail) - [Case Studies Client success stories](https://test.codebyaryan.com/euphoria/case-study) - [Case Study Detail Challenge, approach, results](https://test.codebyaryan.com/euphoria/case-studies) By Focus - [Solutions Enterprise-ready website solutions](https://test.codebyaryan.com/euphoria/solutions) - [Industries Architecture, interiors, agencies](https://test.codebyaryan.com/euphoria/industries) - [Pillar Page Long-form SEO content layout](https://test.codebyaryan.com/euphoria/pillar) - [Resources Guides and downloadable assets](https://test.codebyaryan.com/euphoria/resources) Featured - [Full Bleed Home NEW Immersive visual homepage](https://test.codebyaryan.com/euphoria/home-full-bleed) - [Customer Success POPULAR Popular case study grid](https://test.codebyaryan.com/euphoria/case-studies) - [Style Guide Live design system gallery](https://test.codebyaryan.com/euphoria/style-guide) [View all](https://test.codebyaryan.com/euphoria/portfolio) - Services Show submenu for Services - [All Services](https://test.codebyaryan.com/euphoria/services) - [Service Detail](https://test.codebyaryan.com/euphoria/service-detail) - [Solutions](https://test.codebyaryan.com/euphoria/solutions) - [Industries](https://test.codebyaryan.com/euphoria/industries) - [Pricing](https://test.codebyaryan.com/euphoria/pricing) - [Free Audit Landing](https://test.codebyaryan.com/euphoria/landing-audit) - Journal Show submenu for Journal - [Blog](https://test.codebyaryan.com/blog) - [Blog (Magazine)](https://test.codebyaryan.com/journal) - [Blog (Sidebar)](https://test.codebyaryan.com/blog) - [Blog post](https://test.codebyaryan.com/blog/adaptive-reuse-and-the-future-of-heritage) - [Blog post (Minimal)](https://test.codebyaryan.com/journal/what-is-lorem-ipsum) - [Author](https://test.codebyaryan.com/blog/author/aryan-antal) - More Show submenu for More - [Contact](https://test.codebyaryan.com/euphoria/contact) - [Contact Centered](https://test.codebyaryan.com/euphoria/contact-centered) - [Locations](https://test.codebyaryan.com/euphoria/contact-locations) - [FAQ](https://test.codebyaryan.com/euphoria/faq) - [Documentation](https://test.codebyaryan.com/euphoria/documentation) - [Downloads](https://test.codebyaryan.com/euphoria/downloads) - [Style Guide](https://test.codebyaryan.com/euphoria/style-guide) - [Landing Page](https://test.codebyaryan.com/euphoria/landing) - [Masterclass](https://test.codebyaryan.com/euphoria/landing-masterclass) - [Playbook](https://test.codebyaryan.com/euphoria/landing-playbook) - [Free Trial](https://test.codebyaryan.com/euphoria/landing-trial) - [Free Audit](https://test.codebyaryan.com/euphoria/landing-audit) [Buy Now](https://ecosystem.hubspot.com/marketplace/website/euphoria-theme-by-magazine-makers) Search Developer Guide # Documentation Everything you need to install, configure, and customize your Euphoria theme in HubSpot CMS. Jump to Getting Started — Overview Documentation × Getting Started — Overview Requirements Installation First Steps File Structure Theme Settings Header Footer Modules — Overview Modules — Awards List Modules — Blog Cards Modules — Breadcrumb Strip Modules — Button Variants Modules — Card Showcase Modules — Career Detail Modules — Comparison Table Modules — Contact Form Modules — Contact Modules — Cookie Preferences Modules — CTA Banner Modules — FAQ Modules — Feature Grid Modules — Hero Slider Modules — Hero Modules — Image Slider Modules — Job List Modules — Link List Modules — Location Cards Modules — Logo Marquee Modules — Pillar Content Modules — Policy Content Modules — Portfolio Grid Modules — Pricing Modules — Process Steps Modules — Progress Bars Modules — Project Overview Modules — Resource Library Modules — Search Results Modules — Sector Tags Modules — Service Cards Modules — Split Content Modules — Statistics Modules — Team Grid Modules — Team Member Banner Modules — Testimonials Modules — Timeline Modules — Token Scale Modules — Type Scale Modules — Video Demo Modules — footer.module Modules — Landing footer Modules — Footer Modules — Landing header Modules — Website header Modules — header.module Modules — pricing-card.module Templates — Overview Templates — Home Templates — Home Minimal Templates — Home Slider Templates — Home Full Bleed Templates — About Templates — About Story Templates — About Culture Templates — About Stats Templates — Services Templates — Service Detail Templates — Solutions Templates — Industries Templates — Portfolio Templates — Portfolio Detail Templates — Case Studies Templates — Case Study Templates — Team Templates — Team Member Templates — Careers Templates — Career Detail Templates — Testimonials Templates — Pricing Templates — Contact Templates — Contact Centered Templates — Contact Locations Templates — Landing Page Templates — Landing Audit Templates — Landing Masterclass Templates — Landing Playbook Templates — Landing Trial Templates — FAQ Templates — Documentation Templates — Resources Templates — Downloads Templates — Style Guide Templates — Privacy Policy Templates — Terms of Use Templates — Pillar Page Templates — Blog Index Templates — Blog Magazine Templates — Blog Sidebar Templates — Blog Post Templates — Blog Post Full Templates — Blog Post Minimal Templates — Blog Author Templates — Blog Category Blog Setup System Pages Child Themes FAQ Support Documentation v1.0.0 [Getting Started](https://test.codebyaryan.com/euphoria/documentation#overview) - [Overview](https://test.codebyaryan.com/euphoria/documentation#overview) - [Requirements](https://test.codebyaryan.com/euphoria/documentation#requirements) - [Installation](https://test.codebyaryan.com/euphoria/documentation#installation) - [First Steps](https://test.codebyaryan.com/euphoria/documentation#first-steps) - [File Structure](https://test.codebyaryan.com/euphoria/documentation#file-structure) - [Child Themes](https://test.codebyaryan.com/euphoria/documentation#child-themes) [Theme Setup](https://test.codebyaryan.com/euphoria/documentation#theme-settings) [Header & Footer](https://test.codebyaryan.com/euphoria/documentation#header) - [Website header](https://test.codebyaryan.com/euphoria/documentation#header) - [Website footer](https://test.codebyaryan.com/euphoria/documentation#footer) [Modules](https://test.codebyaryan.com/euphoria/documentation#modules) - [Overview](https://test.codebyaryan.com/euphoria/documentation#modules) - [Awards List](https://test.codebyaryan.com/euphoria/documentation#module-eup-awards-list) - [Blog Cards](https://test.codebyaryan.com/euphoria/documentation#module-eup-blog-cards) - [Breadcrumb Strip](https://test.codebyaryan.com/euphoria/documentation#module-eup-breadcrumb-marquee) - [Button Variants](https://test.codebyaryan.com/euphoria/documentation#module-eup-button-variants) - [Card Showcase](https://test.codebyaryan.com/euphoria/documentation#module-eup-card-showcase) - [Career Detail](https://test.codebyaryan.com/euphoria/documentation#module-eup-career-detail) - [Comparison Table](https://test.codebyaryan.com/euphoria/documentation#module-eup-comparison-table) - [Contact Form](https://test.codebyaryan.com/euphoria/documentation#module-eup-contact-form) - [Contact](https://test.codebyaryan.com/euphoria/documentation#module-eup-contact) - [Cookie Preferences](https://test.codebyaryan.com/euphoria/documentation#module-eup-cookie-preferences) - [CTA Banner](https://test.codebyaryan.com/euphoria/documentation#module-eup-cta-banner) - [FAQ](https://test.codebyaryan.com/euphoria/documentation#module-eup-faq) - [Feature Grid](https://test.codebyaryan.com/euphoria/documentation#module-eup-feature-grid) - [Hero Slider](https://test.codebyaryan.com/euphoria/documentation#module-eup-hero-slider) - [Hero](https://test.codebyaryan.com/euphoria/documentation#module-eup-hero) - [Image Slider](https://test.codebyaryan.com/euphoria/documentation#module-eup-image-slider) - [Job List](https://test.codebyaryan.com/euphoria/documentation#module-eup-job-list) - [Link List](https://test.codebyaryan.com/euphoria/documentation#module-eup-link-list) - [Location Cards](https://test.codebyaryan.com/euphoria/documentation#module-eup-location-cards) - [Logo Marquee](https://test.codebyaryan.com/euphoria/documentation#module-eup-logo-marquee) - [Pillar Content](https://test.codebyaryan.com/euphoria/documentation#module-eup-pillar-content) - [Policy Content](https://test.codebyaryan.com/euphoria/documentation#module-eup-policy-content) - [Portfolio Grid](https://test.codebyaryan.com/euphoria/documentation#module-eup-portfolio-grid) - [Pricing](https://test.codebyaryan.com/euphoria/documentation#module-eup-pricing) - [Process Steps](https://test.codebyaryan.com/euphoria/documentation#module-eup-process-steps) - [Progress Bars](https://test.codebyaryan.com/euphoria/documentation#module-eup-progress-bars) - [Project Overview](https://test.codebyaryan.com/euphoria/documentation#module-eup-project-overview) - [Resource Library](https://test.codebyaryan.com/euphoria/documentation#module-eup-resource-library) - [Search Results](https://test.codebyaryan.com/euphoria/documentation#module-eup-search-results) - [Sector Tags](https://test.codebyaryan.com/euphoria/documentation#module-eup-sector-tags) - [Service Cards](https://test.codebyaryan.com/euphoria/documentation#module-eup-service-cards) - [Split Content](https://test.codebyaryan.com/euphoria/documentation#module-eup-split-content) - [Statistics](https://test.codebyaryan.com/euphoria/documentation#module-eup-statistics) - [Team Grid](https://test.codebyaryan.com/euphoria/documentation#module-eup-team-grid) - [Team Member Banner](https://test.codebyaryan.com/euphoria/documentation#module-eup-team-member-banner) - [Testimonials](https://test.codebyaryan.com/euphoria/documentation#module-eup-testimonials) - [Timeline](https://test.codebyaryan.com/euphoria/documentation#module-eup-timeline) - [Token Scale](https://test.codebyaryan.com/euphoria/documentation#module-eup-token-scale) - [Type Scale](https://test.codebyaryan.com/euphoria/documentation#module-eup-type-scale) - [Video Demo](https://test.codebyaryan.com/euphoria/documentation#module-eup-video-demo) - [footer.module](https://test.codebyaryan.com/euphoria/documentation#module-footer) - [Landing footer](https://test.codebyaryan.com/euphoria/documentation#module-footer-landing) - [Footer](https://test.codebyaryan.com/euphoria/documentation#module-footer) - [Landing header](https://test.codebyaryan.com/euphoria/documentation#module-header-landing) - [Website header](https://test.codebyaryan.com/euphoria/documentation#module-header) - [header.module](https://test.codebyaryan.com/euphoria/documentation#module-header) - [pricing-card.module](https://test.codebyaryan.com/euphoria/documentation#module-pricing-card) [Templates](https://test.codebyaryan.com/euphoria/documentation#templates) - [Overview](https://test.codebyaryan.com/euphoria/documentation#templates) - [Home](https://test.codebyaryan.com/euphoria/documentation#template-home) - [Home Minimal](https://test.codebyaryan.com/euphoria/documentation#template-home-minimal) - [Home Slider](https://test.codebyaryan.com/euphoria/documentation#template-home-slider) - [Home Full Bleed](https://test.codebyaryan.com/euphoria/documentation#template-home-full-bleed) - [About](https://test.codebyaryan.com/euphoria/documentation#template-about) - [About Story](https://test.codebyaryan.com/euphoria/documentation#template-about-story) - [About Culture](https://test.codebyaryan.com/euphoria/documentation#template-about-culture) - [About Stats](https://test.codebyaryan.com/euphoria/documentation#template-about-stats) - [Services](https://test.codebyaryan.com/euphoria/documentation#template-services) - [Service Detail](https://test.codebyaryan.com/euphoria/documentation#template-service-detail) - [Solutions](https://test.codebyaryan.com/euphoria/documentation#template-solutions) - [Industries](https://test.codebyaryan.com/euphoria/documentation#template-industries) - [Portfolio](https://test.codebyaryan.com/euphoria/documentation#template-portfolio) - [Portfolio Detail](https://test.codebyaryan.com/euphoria/documentation#template-portfolio-detail) - [Case Studies](https://test.codebyaryan.com/euphoria/documentation#template-case-studies) - [Case Study](https://test.codebyaryan.com/euphoria/documentation#template-case-study) - [Team](https://test.codebyaryan.com/euphoria/documentation#template-team) - [Team Member](https://test.codebyaryan.com/euphoria/documentation#template-team-member) - [Careers](https://test.codebyaryan.com/euphoria/documentation#template-careers) - [Career Detail](https://test.codebyaryan.com/euphoria/documentation#template-career-detail) - [Testimonials](https://test.codebyaryan.com/euphoria/documentation#template-testimonials) - [Pricing](https://test.codebyaryan.com/euphoria/documentation#template-pricing) - [Contact](https://test.codebyaryan.com/euphoria/documentation#template-contact) - [Contact Centered](https://test.codebyaryan.com/euphoria/documentation#template-contact-centered) - [Contact Locations](https://test.codebyaryan.com/euphoria/documentation#template-contact-locations) - [Landing Page](https://test.codebyaryan.com/euphoria/documentation#template-landing-page) - [Landing Audit](https://test.codebyaryan.com/euphoria/documentation#template-landing-audit) - [Landing Masterclass](https://test.codebyaryan.com/euphoria/documentation#template-landing-masterclass) - [Landing Playbook](https://test.codebyaryan.com/euphoria/documentation#template-landing-playbook) - [Landing Trial](https://test.codebyaryan.com/euphoria/documentation#template-landing-trial) - [FAQ](https://test.codebyaryan.com/euphoria/documentation#template-faq) - [Documentation](https://test.codebyaryan.com/euphoria/documentation#template-documentation) - [Resources](https://test.codebyaryan.com/euphoria/documentation#template-resources) - [Downloads](https://test.codebyaryan.com/euphoria/documentation#template-downloads) - [Style Guide](https://test.codebyaryan.com/euphoria/documentation#template-style-guide) - [Privacy Policy](https://test.codebyaryan.com/euphoria/documentation#template-privacy) - [Terms of Use](https://test.codebyaryan.com/euphoria/documentation#template-terms) - [Pillar Page](https://test.codebyaryan.com/euphoria/documentation#template-pillar) - [Blog Index](https://test.codebyaryan.com/euphoria/documentation#template-blog-index) - [Blog Magazine](https://test.codebyaryan.com/euphoria/documentation#template-blog-magazine) - [Blog Sidebar](https://test.codebyaryan.com/euphoria/documentation#template-blog-sidebar) - [Blog Post](https://test.codebyaryan.com/euphoria/documentation#template-blog-post) - [Blog Post Full](https://test.codebyaryan.com/euphoria/documentation#template-blog-post-full) - [Blog Post Minimal](https://test.codebyaryan.com/euphoria/documentation#template-blog-post-minimal) - [Blog Author](https://test.codebyaryan.com/euphoria/documentation#template-blog-author) - [Blog Category](https://test.codebyaryan.com/euphoria/documentation#template-blog-category) - [System Pages](https://test.codebyaryan.com/euphoria/documentation#system-pages) [Blog](https://test.codebyaryan.com/euphoria/documentation#blog-setup) [FAQ](https://test.codebyaryan.com/euphoria/documentation#faq) - [FAQ](https://test.codebyaryan.com/euphoria/documentation#faq) - [Support](https://test.codebyaryan.com/euphoria/documentation#support) Docs › Getting Started › Overview ## Getting Started with Euphoria v1.0.0 Euphoria is a premium HubSpot CMS theme by Magazine Makers for architectural studios and creative agencies. Use this guide to install the theme, configure Theme Settings, and build pages with the modules and templates included in the theme. ### 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](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/docs-overview.png?width=1200&height=675&name=docs-overview.png) 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 1. **Theme Settings** — Set global colors, fonts, spacing, buttons, and header behavior. 2. **Website header** — Add your logo, assign a menu, and set the CTA in Global content. 3. **Website footer** — Replace demo columns, contact details, and legal links. 4. **Create pages** — Start from Home, About, Services, Portfolio, Landing, or Blog templates. 5. **Connect forms** — Assign HubSpot forms on contact and landing modules. 6. **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. ![Website header preview on the Home template](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/docs-header.png?width=1200&height=75&name=docs-header.png) Website header as shown on the Home template | 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. ![Website footer preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/docs-footer.png?width=1200&height=375&name=docs-footer.png) Footer as shown on website templates | 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](https://test.codebyaryan.com/euphoria/documentation#module-eup-awards-list) - [Blog Cards](https://test.codebyaryan.com/euphoria/documentation#module-eup-blog-cards) - [Breadcrumb Strip](https://test.codebyaryan.com/euphoria/documentation#module-eup-breadcrumb-marquee) - [Button Variants](https://test.codebyaryan.com/euphoria/documentation#module-eup-button-variants) - [Card Showcase](https://test.codebyaryan.com/euphoria/documentation#module-eup-card-showcase) - [Career Detail](https://test.codebyaryan.com/euphoria/documentation#module-eup-career-detail) - [Comparison Table](https://test.codebyaryan.com/euphoria/documentation#module-eup-comparison-table) - [Contact Form](https://test.codebyaryan.com/euphoria/documentation#module-eup-contact-form) - [Contact](https://test.codebyaryan.com/euphoria/documentation#module-eup-contact) - [Cookie Preferences](https://test.codebyaryan.com/euphoria/documentation#module-eup-cookie-preferences) - [CTA Banner](https://test.codebyaryan.com/euphoria/documentation#module-eup-cta-banner) - [FAQ](https://test.codebyaryan.com/euphoria/documentation#module-eup-faq) - [Feature Grid](https://test.codebyaryan.com/euphoria/documentation#module-eup-feature-grid) - [Hero Slider](https://test.codebyaryan.com/euphoria/documentation#module-eup-hero-slider) - [Hero](https://test.codebyaryan.com/euphoria/documentation#module-eup-hero) - [Image Slider](https://test.codebyaryan.com/euphoria/documentation#module-eup-image-slider) - [Job List](https://test.codebyaryan.com/euphoria/documentation#module-eup-job-list) - [Link List](https://test.codebyaryan.com/euphoria/documentation#module-eup-link-list) - [Location Cards](https://test.codebyaryan.com/euphoria/documentation#module-eup-location-cards) - [Logo Marquee](https://test.codebyaryan.com/euphoria/documentation#module-eup-logo-marquee) - [Pillar Content](https://test.codebyaryan.com/euphoria/documentation#module-eup-pillar-content) - [Policy Content](https://test.codebyaryan.com/euphoria/documentation#module-eup-policy-content) - [Portfolio Grid](https://test.codebyaryan.com/euphoria/documentation#module-eup-portfolio-grid) - [Pricing](https://test.codebyaryan.com/euphoria/documentation#module-eup-pricing) - [Process Steps](https://test.codebyaryan.com/euphoria/documentation#module-eup-process-steps) - [Progress Bars](https://test.codebyaryan.com/euphoria/documentation#module-eup-progress-bars) - [Project Overview](https://test.codebyaryan.com/euphoria/documentation#module-eup-project-overview) - [Resource Library](https://test.codebyaryan.com/euphoria/documentation#module-eup-resource-library) - [Search Results](https://test.codebyaryan.com/euphoria/documentation#module-eup-search-results) - [Sector Tags](https://test.codebyaryan.com/euphoria/documentation#module-eup-sector-tags) - [Service Cards](https://test.codebyaryan.com/euphoria/documentation#module-eup-service-cards) - [Split Content](https://test.codebyaryan.com/euphoria/documentation#module-eup-split-content) - [Statistics](https://test.codebyaryan.com/euphoria/documentation#module-eup-statistics) - [Team Grid](https://test.codebyaryan.com/euphoria/documentation#module-eup-team-grid) - [Team Member Banner](https://test.codebyaryan.com/euphoria/documentation#module-eup-team-member-banner) - [Testimonials](https://test.codebyaryan.com/euphoria/documentation#module-eup-testimonials) - [Timeline](https://test.codebyaryan.com/euphoria/documentation#module-eup-timeline) - [Token Scale](https://test.codebyaryan.com/euphoria/documentation#module-eup-token-scale) - [Type Scale](https://test.codebyaryan.com/euphoria/documentation#module-eup-type-scale) - [Video Demo](https://test.codebyaryan.com/euphoria/documentation#module-eup-video-demo) - [footer.module](https://test.codebyaryan.com/euphoria/documentation#module-footer) - [Landing footer](https://test.codebyaryan.com/euphoria/documentation#module-footer-landing) - [Footer](https://test.codebyaryan.com/euphoria/documentation#module-footer) - [Landing header](https://test.codebyaryan.com/euphoria/documentation#module-header-landing) - [Website header](https://test.codebyaryan.com/euphoria/documentation#module-header) - [header.module](https://test.codebyaryan.com/euphoria/documentation#module-header) - [pricing-card.module](https://test.codebyaryan.com/euphoria/documentation#module-pricing-card) ### Awards List Reusable Awards List section for pages and landings. ![Awards List module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-awards-list.png?width=1200&height=675&name=eup-awards-list.png) Awards List — cropped from live page screenshot | 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. ![Blog Cards module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-blog-cards.png?width=1200&height=675&name=eup-blog-cards.png) Blog Cards — cropped from live page screenshot | 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. ![Breadcrumb Strip module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-breadcrumb-marquee.png?width=1920&height=56&name=eup-breadcrumb-marquee.png) Breadcrumb Strip — cropped from live page screenshot | 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. ![Button Variants module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-button-variants.png?width=1200&height=675&name=eup-button-variants.png) Button Variants — cropped from live page screenshot | 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. ![Card Showcase module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-card-showcase.png?width=1200&height=675&name=eup-card-showcase.png) Card Showcase — cropped from live page screenshot | 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. ![Career Detail module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-style-guide.png?width=1200&height=675&name=tpl-style-guide.png) Career Detail — cropped from live page screenshot | 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. ![Comparison Table module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-comparison-table.png?width=1200&height=675&name=eup-comparison-table.png) Comparison Table — cropped from live page screenshot | 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. ![Contact Form module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-contact-form.png?width=1200&height=675&name=eup-contact-form.png) Contact Form — cropped from live page screenshot | 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. ![Contact module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-contact.png?width=1200&height=675&name=eup-contact.png) Contact — cropped from live page screenshot | 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. ![Cookie Preferences module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-cookie-preferences.png?width=1200&height=675&name=eup-cookie-preferences.png) Cookie Preferences — cropped from live page screenshot | 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. ![CTA Banner module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-cta-banner.png?width=1200&height=675&name=eup-cta-banner.png) CTA Banner — cropped from live page screenshot | 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](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-faq.png?width=1200&height=675&name=eup-faq.png) 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. ![Feature Grid module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-feature-grid.png?width=1200&height=675&name=eup-feature-grid.png) Feature Grid — cropped from live page screenshot | 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. ![Hero Slider module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-hero-slider.png?width=1200&height=675&name=eup-hero-slider.png) Hero Slider — cropped from live page screenshot | 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. ![Hero module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-hero.png?width=1200&height=675&name=eup-hero.png) Hero — cropped from live page screenshot | 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. ![Image Slider module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-image-slider.png?width=1200&height=675&name=eup-image-slider.png) Image Slider — cropped from live page screenshot | 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. ![Job List module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-job-list.png?width=1200&height=675&name=eup-job-list.png) Job List — cropped from live page screenshot | 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. ![Link List module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-link-list.png?width=1200&height=675&name=eup-link-list.png) Link List — cropped from live page screenshot | 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. ![Location Cards module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-location-cards.png?width=1200&height=675&name=eup-location-cards.png) Location Cards — cropped from live page screenshot | 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 module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-logo-marquee.png?width=1200&height=675&name=eup-logo-marquee.png) 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. ![Pillar Content module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-pillar-content.png?width=1200&height=675&name=eup-pillar-content.png) Pillar Content — cropped from live page screenshot | 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. ![Policy Content module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-policy-content.png?width=1200&height=675&name=eup-policy-content.png) Policy Content — cropped from live page screenshot | 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. ![Portfolio Grid module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-portfolio-grid.png?width=1200&height=675&name=eup-portfolio-grid.png) Portfolio Grid — cropped from live page screenshot | 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. ![Pricing module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-pricing.png?width=1200&height=675&name=eup-pricing.png) Pricing — cropped from live page screenshot | 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. ![Process Steps module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-process-steps.png?width=1200&height=675&name=eup-process-steps.png) Process Steps — cropped from live page screenshot | 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. ![Progress Bars module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-progress-bars.png?width=1200&height=675&name=eup-progress-bars.png) Progress Bars — cropped from live page screenshot | 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. ![Project Overview module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-project-overview.png?width=1200&height=675&name=eup-project-overview.png) Project Overview — cropped from live page screenshot | 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. ![Resource Library module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-resource-library.png?width=1200&height=675&name=eup-resource-library.png) Resource Library — cropped from live page screenshot | 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. ![Search Results module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-search-results.png?width=1200&height=675&name=eup-search-results.png) Search Results — cropped from live page screenshot | 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. ![Sector Tags module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-sector-tags.png?width=1200&height=675&name=eup-sector-tags.png) Sector Tags — cropped from live page screenshot | 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. ![Service Cards module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-service-cards.png?width=1200&height=675&name=eup-service-cards.png) Service Cards — cropped from live page screenshot | 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. ![Split Content module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-split-content.png?width=1200&height=675&name=eup-split-content.png) Split Content — cropped from live page screenshot | 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. ![Statistics module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-statistics.png?width=1200&height=675&name=eup-statistics.png) Statistics — cropped from live page screenshot | 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. ![Team Grid module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-team-grid.png?width=1200&height=675&name=eup-team-grid.png) Team Grid — cropped from live page screenshot | 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. ![Team Member Banner module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-team-member-banner.png?width=1200&height=675&name=eup-team-member-banner.png) Team Member Banner — cropped from live page screenshot | 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. ![Testimonials module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-testimonials.png?width=1200&height=675&name=eup-testimonials.png) Testimonials — cropped from live page screenshot | 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. ![Timeline module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-timeline.png?width=1200&height=675&name=eup-timeline.png) Timeline — cropped from live page screenshot | 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. ![Token Scale module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-token-scale.png?width=1200&height=675&name=eup-token-scale.png) Token Scale — cropped from live page screenshot | 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. ![Type Scale module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-type-scale.png?width=1200&height=675&name=eup-type-scale.png) Type Scale — cropped from live page screenshot | 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. ![Video Demo module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/eup-video-demo.png?width=1200&height=675&name=eup-video-demo.png) Video Demo — cropped from live page screenshot | 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. ![footer.module module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/footer.png?width=1200&height=675&name=footer.png) footer.module — cropped from live page screenshot | 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. ![Landing footer module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/footer-landing.png?width=1200&height=675&name=footer-landing.png) Landing footer — cropped from live page screenshot | 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. ![Footer module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/footer.png?width=1200&height=675&name=footer.png) Footer — cropped from live page screenshot | 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. ![Landing header module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/header-landing.png?width=1200&height=675&name=header-landing.png) Landing header — cropped from live page screenshot | 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. ![Website header module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/header.png?width=1200&height=675&name=header.png) Website header — cropped from live page screenshot | 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. ![header.module module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/header.png?width=1200&height=675&name=header.png) header.module — cropped from live page screenshot | 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. ![pricing-card.module module preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/pricing-card.png?width=1200&height=675&name=pricing-card.png) pricing-card.module — cropped from live page screenshot | 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](https://test.codebyaryan.com/euphoria/documentation#template-home) - [Home Minimal](https://test.codebyaryan.com/euphoria/documentation#template-home-minimal) - [Home Slider](https://test.codebyaryan.com/euphoria/documentation#template-home-slider) - [Home Full Bleed](https://test.codebyaryan.com/euphoria/documentation#template-home-full-bleed) - [About](https://test.codebyaryan.com/euphoria/documentation#template-about) - [About Story](https://test.codebyaryan.com/euphoria/documentation#template-about-story) - [About Culture](https://test.codebyaryan.com/euphoria/documentation#template-about-culture) - [About Stats](https://test.codebyaryan.com/euphoria/documentation#template-about-stats) - [Services](https://test.codebyaryan.com/euphoria/documentation#template-services) - [Service Detail](https://test.codebyaryan.com/euphoria/documentation#template-service-detail) - [Solutions](https://test.codebyaryan.com/euphoria/documentation#template-solutions) - [Industries](https://test.codebyaryan.com/euphoria/documentation#template-industries) - [Portfolio](https://test.codebyaryan.com/euphoria/documentation#template-portfolio) - [Portfolio Detail](https://test.codebyaryan.com/euphoria/documentation#template-portfolio-detail) - [Case Studies](https://test.codebyaryan.com/euphoria/documentation#template-case-studies) - [Case Study](https://test.codebyaryan.com/euphoria/documentation#template-case-study) - [Team](https://test.codebyaryan.com/euphoria/documentation#template-team) - [Team Member](https://test.codebyaryan.com/euphoria/documentation#template-team-member) - [Careers](https://test.codebyaryan.com/euphoria/documentation#template-careers) - [Career Detail](https://test.codebyaryan.com/euphoria/documentation#template-career-detail) - [Testimonials](https://test.codebyaryan.com/euphoria/documentation#template-testimonials) - [Pricing](https://test.codebyaryan.com/euphoria/documentation#template-pricing) - [Contact](https://test.codebyaryan.com/euphoria/documentation#template-contact) - [Contact Centered](https://test.codebyaryan.com/euphoria/documentation#template-contact-centered) - [Contact Locations](https://test.codebyaryan.com/euphoria/documentation#template-contact-locations) - [Landing Page](https://test.codebyaryan.com/euphoria/documentation#template-landing-page) - [Landing Audit](https://test.codebyaryan.com/euphoria/documentation#template-landing-audit) - [Landing Masterclass](https://test.codebyaryan.com/euphoria/documentation#template-landing-masterclass) - [Landing Playbook](https://test.codebyaryan.com/euphoria/documentation#template-landing-playbook) - [Landing Trial](https://test.codebyaryan.com/euphoria/documentation#template-landing-trial) - [FAQ](https://test.codebyaryan.com/euphoria/documentation#template-faq) - [Documentation](https://test.codebyaryan.com/euphoria/documentation#template-documentation) - [Resources](https://test.codebyaryan.com/euphoria/documentation#template-resources) - [Downloads](https://test.codebyaryan.com/euphoria/documentation#template-downloads) - [Style Guide](https://test.codebyaryan.com/euphoria/documentation#template-style-guide) - [Privacy Policy](https://test.codebyaryan.com/euphoria/documentation#template-privacy) - [Terms of Use](https://test.codebyaryan.com/euphoria/documentation#template-terms) - [Pillar Page](https://test.codebyaryan.com/euphoria/documentation#template-pillar) - [Blog Index](https://test.codebyaryan.com/euphoria/documentation#template-blog-index) - [Blog Magazine](https://test.codebyaryan.com/euphoria/documentation#template-blog-magazine) - [Blog Sidebar](https://test.codebyaryan.com/euphoria/documentation#template-blog-sidebar) - [Blog Post](https://test.codebyaryan.com/euphoria/documentation#template-blog-post) - [Blog Post Full](https://test.codebyaryan.com/euphoria/documentation#template-blog-post-full) - [Blog Post Minimal](https://test.codebyaryan.com/euphoria/documentation#template-blog-post-minimal) - [Blog Author](https://test.codebyaryan.com/euphoria/documentation#template-blog-author) - [Blog Category](https://test.codebyaryan.com/euphoria/documentation#template-blog-category) ### Home Primary homepage layout with hero, proof, and featured work. ![Home template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-home.png?width=1200&height=675&name=tpl-home.png) Home — above-the-fold preview | 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. ![Home Minimal template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-home-minimal.png?width=1200&height=675&name=tpl-home-minimal.png) Home Minimal — above-the-fold preview | 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. ![Home Slider template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-home-slider.png?width=1200&height=675&name=tpl-home-slider.png) Home Slider — above-the-fold preview | 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. ![Home Full Bleed template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-home-full-bleed.png?width=1200&height=675&name=tpl-home-full-bleed.png) Home Full Bleed — above-the-fold preview | 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. ![About template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-about.png?width=1200&height=675&name=tpl-about.png) About — above-the-fold preview | 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. ![About Story template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-about-story.png?width=1200&height=675&name=tpl-about-story.png) About Story — above-the-fold preview | 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. ![About Culture template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-about-culture.png?width=1200&height=675&name=tpl-about-culture.png) About Culture — above-the-fold preview | 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. ![About Stats template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-about-stats.png?width=1200&height=675&name=tpl-about-stats.png) About Stats — above-the-fold preview | 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. ![Services template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-services.png?width=1200&height=675&name=tpl-services.png) Services — above-the-fold preview | 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. ![Service Detail template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-service-detail.png?width=1200&height=675&name=tpl-service-detail.png) Service Detail — above-the-fold preview | Use case | Single service deep-dive page. | | --- | --- | | Template file | `templates/service-detail.html` | | Available for new content | Yes | ### Solutions Solutions overview marketing page. ![Solutions template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-solutions.png?width=1200&height=675&name=tpl-solutions.png) Solutions — above-the-fold preview | Use case | Solutions overview marketing page. | | --- | --- | | Template file | `templates/solutions.html` | | Available for new content | Yes | ### Industries Industry or sector overview page. ![Industries template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-industries.png?width=1200&height=675&name=tpl-industries.png) Industries — above-the-fold preview | Use case | Industry or sector overview page. | | --- | --- | | Template file | `templates/industries.html` | | Available for new content | Yes | ### Portfolio Project listing / portfolio grid. ![Portfolio template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-portfolio.png?width=1200&height=675&name=tpl-portfolio.png) Portfolio — above-the-fold preview | Use case | Project listing / portfolio grid. | | --- | --- | | Template file | `templates/portfolio.html` | | Available for new content | Yes | ### Portfolio Detail Individual project detail layout. ![Portfolio Detail template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-portfolio-detail.png?width=1200&height=675&name=tpl-portfolio-detail.png) Portfolio Detail — above-the-fold preview | Use case | Individual project detail layout. | | --- | --- | | Template file | `templates/portfolio-detail.html` | | Available for new content | Yes | ### Case Studies Case study listing page. ![Case Studies template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-case-studies.png?width=1200&height=675&name=tpl-case-studies.png) Case Studies — above-the-fold preview | 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. ![Case Study template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-case-study.png?width=1200&height=675&name=tpl-case-study.png) Case Study — above-the-fold preview | 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. ![Team template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-team.png?width=1200&height=675&name=tpl-team.png) Team — above-the-fold preview | Use case | Team directory with member cards. | | --- | --- | | Template file | `templates/team.html` | | Available for new content | Yes | ### Team Member Individual team member profile. ![Team Member template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-team-member.png?width=1200&height=675&name=tpl-team-member.png) Team Member — above-the-fold preview | Use case | Individual team member profile. | | --- | --- | | Template file | `templates/team-member.html` | | Available for new content | Yes | ### Careers Open roles listing. ![Careers template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-careers.png?width=1200&height=675&name=tpl-careers.png) Careers — above-the-fold preview | Use case | Open roles listing. | | --- | --- | | Template file | `templates/careers.html` | | Available for new content | Yes | ### Career Detail Single job posting layout. ![Career Detail template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-career-detail.png?width=1200&height=675&name=tpl-career-detail.png) Career Detail — above-the-fold preview | Use case | Single job posting layout. | | --- | --- | | Template file | `templates/career-detail.html` | | Available for new content | Yes | ### Testimonials Dedicated testimonials marketing page. ![Testimonials template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-testimonials.png?width=1200&height=675&name=tpl-testimonials.png) Testimonials — above-the-fold preview | Use case | Dedicated testimonials marketing page. | | --- | --- | | Template file | `templates/testimonials.html` | | Available for new content | Yes | ### Pricing Pricing and plans marketing page. ![Pricing template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-pricing.png?width=1200&height=675&name=tpl-pricing.png) Pricing — above-the-fold preview | Use case | Pricing and plans marketing page. | | --- | --- | | Template file | `templates/pricing.html` | | Available for new content | Yes | ### Contact Primary contact page with form. ![Contact template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-contact.png?width=1200&height=675&name=tpl-contact.png) Contact — above-the-fold preview | Use case | Primary contact page with form. | | --- | --- | | Template file | `templates/contact.html` | | Available for new content | Yes | ### Contact Centered Centered contact layout. ![Contact Centered template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-contact-centered.png?width=1200&height=675&name=tpl-contact-centered.png) Contact Centered — above-the-fold preview | Use case | Centered contact layout. | | --- | --- | | Template file | `templates/contact-centered.html` | | Available for new content | Yes | ### Contact Locations Multi-location contact page. ![Contact Locations template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-contact-locations.png?width=1200&height=675&name=tpl-contact-locations.png) Contact Locations — above-the-fold preview | 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. ![Landing Page template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-landing-page.png?width=1200&height=675&name=tpl-landing-page.png) Landing Page — above-the-fold preview | 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. ![Landing Audit template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-landing-audit.png?width=1200&height=675&name=tpl-landing-audit.png) Landing Audit — above-the-fold preview | Use case | Audit offer landing page. | | --- | --- | | Template file | `templates/landing-audit.html` | | Available for new content | Yes | ### Landing Masterclass Masterclass or webinar landing page. ![Landing Masterclass template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-landing-masterclass.png?width=1200&height=675&name=tpl-landing-masterclass.png) Landing Masterclass — above-the-fold preview | Use case | Masterclass or webinar landing page. | | --- | --- | | Template file | `templates/landing-masterclass.html` | | Available for new content | Yes | ### Landing Playbook Playbook download landing page. ![Landing Playbook template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-landing-playbook.png?width=1200&height=675&name=tpl-landing-playbook.png) Landing Playbook — above-the-fold preview | Use case | Playbook download landing page. | | --- | --- | | Template file | `templates/landing-playbook.html` | | Available for new content | Yes | ### Landing Trial Trial signup landing page. ![Landing Trial template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-landing-trial.png?width=1200&height=675&name=tpl-landing-trial.png) Landing Trial — above-the-fold preview | 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](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-faq.png?width=1200&height=675&name=tpl-faq.png) FAQ — above-the-fold preview | Use case | FAQ listing page with search and filters. | | --- | --- | | Template file | `templates/faq.html` | | Available for new content | Yes | ### Documentation Theme documentation guide page. ![Documentation template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-documentation.png?width=1200&height=675&name=tpl-documentation.png) Documentation — above-the-fold preview | Use case | Theme documentation guide page. | | --- | --- | | Template file | `templates/documentation.html` | | Available for new content | Yes | ### Resources Resource library / content hub. ![Resources template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-resources.png?width=1200&height=675&name=tpl-resources.png) Resources — above-the-fold preview | Use case | Resource library / content hub. | | --- | --- | | Template file | `templates/resources.html` | | Available for new content | Yes | ### Downloads Downloadable assets grid. ![Downloads template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-downloads.png?width=1200&height=675&name=tpl-downloads.png) Downloads — above-the-fold preview | Use case | Downloadable assets grid. | | --- | --- | | Template file | `templates/downloads.html` | | Available for new content | Yes | ### Style Guide Design tokens and component samples. ![Style Guide template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-style-guide.png?width=1200&height=675&name=tpl-style-guide.png) Style Guide — above-the-fold preview | Use case | Design tokens and component samples. | | --- | --- | | Template file | `templates/style-guide.html` | | Available for new content | Yes | ### Privacy Policy Privacy policy legal page. ![Privacy Policy template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-privacy.png?width=1200&height=675&name=tpl-privacy.png) Privacy Policy — above-the-fold preview | Use case | Privacy policy legal page. | | --- | --- | | Template file | `templates/privacy.html` | | Available for new content | Yes | ### Terms of Use Terms of use legal page. ![Terms of Use template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-terms.png?width=1200&height=675&name=tpl-terms.png) Terms of Use — above-the-fold preview | 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. ![Pillar Page template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-pillar.png?width=1200&height=675&name=tpl-pillar.png) Pillar Page — above-the-fold preview | Use case | Long-form pillar content with sidebar nav. | | --- | --- | | Template file | `templates/pillar.html` | | Available for new content | Yes | ### Blog Index Blog listing template. ![Blog Index template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-blog-index.png?width=1200&height=675&name=tpl-blog-index.png) Blog Index — above-the-fold preview | Use case | Blog listing template. | | --- | --- | | Template file | `templates/blog-index.html` | | Available for new content | Yes | ### Blog Magazine Magazine-style blog listing. ![Blog Magazine template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-blog-magazine.png?width=1200&height=675&name=tpl-blog-magazine.png) Blog Magazine — above-the-fold preview | Use case | Magazine-style blog listing. | | --- | --- | | Template file | `templates/blog-magazine.html` | | Available for new content | Yes | ### Blog Sidebar Blog listing with sidebar. ![Blog Sidebar template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-blog-sidebar.png?width=1200&height=675&name=tpl-blog-sidebar.png) Blog Sidebar — above-the-fold preview | Use case | Blog listing with sidebar. | | --- | --- | | Template file | `templates/blog-sidebar.html` | | Available for new content | Yes | ### Blog Post Standard blog post template. ![Blog Post template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-blog-post.png?width=1200&height=675&name=tpl-blog-post.png) Blog Post — above-the-fold preview | 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. ![Blog Post Full template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-blog-post-full.png?width=1200&height=675&name=tpl-blog-post-full.png) Blog Post Full — above-the-fold preview | 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. ![Blog Post Minimal template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-blog-post-minimal.png?width=1200&height=675&name=tpl-blog-post-minimal.png) Blog Post Minimal — above-the-fold preview | Use case | Minimal blog post layout. | | --- | --- | | Template file | `templates/blog-post-minimal.html` | | Available for new content | Yes | ### Blog Author Author archive template. ![Blog Author template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-blog-author.png?width=1200&height=675&name=tpl-blog-author.png) Blog Author — above-the-fold preview | Use case | Author archive template. | | --- | --- | | Template file | `templates/blog-author.html` | | Available for new content | Yes | ### Blog Category Category archive template. ![Blog Category template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/tpl-blog-category.png?width=1200&height=675&name=tpl-blog-category.png) Blog Category — above-the-fold preview | Use case | Category archive template. | | --- | --- | | Template file | `templates/blog-category.html` | | Available for new content | Yes | ### Blog Setup 1. Assign a listing template (Blog Index, Magazine, or Sidebar). 2. Assign a post template (standard, full, or minimal). 3. Use Author and Category templates for author hubs and category archives when needed. 4. Feature posts on marketing pages with the Blog Cards module. ![Blog Index template preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/docs-blog.png?width=1200&height=675&name=docs-blog.png) Blog Index template preview ### 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 | ![404 system page preview](https://test.codebyaryan.com/hs-fs/hubfs/raw_assets/public/Euphoria/images/docs-previews/docs-404.png?width=1200&height=675&name=docs-404.png) 404 system page preview ### 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](https://test.codebyaryan.com/faq?hsLang=en). ### Support and Licensing Euphoria is built by **Magazine Makers**. Licensed customers can email [hello@magazinemakers.com](mailto: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. ### Quick Links [Theme Setup Guide ›](https://test.codebyaryan.com/euphoria/documentation#theme-settings) [Module Reference ›](https://test.codebyaryan.com/euphoria/documentation#modules) [Template Reference ›](https://test.codebyaryan.com/euphoria/documentation#templates) [FAQ ›](https://test.codebyaryan.com/euphoria/documentation#faq) [Euphoria](https://test.codebyaryan.com/euphoria?hsLang=en) A premium HubSpot Marketplace theme for architectural studios and creative agencies that refuse to compromise on quality. [Follow us on Instagram](https://www.instagram.com/) [Follow us on X](https://www.twitter.com/) [Follow us on LinkedIn](https://www.linkedin.com/) [Follow us on Facebook](https://www.facebook.com/) ## Theme - [Style Guide](https://test.codebyaryan.com/euphoria/style-guide) - [Documentation](https://test.codebyaryan.com/euphoria/documentation) - [Pricing](https://test.codebyaryan.com/euphoria/pricing) - [Resources](https://test.codebyaryan.com/euphoria/resources) - [Marketplace](https://ecosystem.hubspot.com/marketplace/website) ## Pages - [About](https://test.codebyaryan.com/euphoria/about) - [Services](https://test.codebyaryan.com/euphoria/services) - [Portfolio](https://test.codebyaryan.com/euphoria/portfolio) - [Blog](https://test.codebyaryan.com/blog) - [Careers](https://test.codebyaryan.com/euphoria/careers) ## Legal - [Privacy Policy](https://test.codebyaryan.com/euphoria/privacy) - [Terms of Use](https://test.codebyaryan.com/euphoria/terms) - [FAQ](https://test.codebyaryan.com/euphoria/faq) - [Contact](https://test.codebyaryan.com/euphoria/contact) hello@euphoriastudio.com [+1 (415) 555-0194](tel:+14155550194) San Francisco © {{year}} Euphoria Theme. All rights reserved. - [Style Guide](https://test.codebyaryan.com/euphoria/style-guide) - [Docs](https://test.codebyaryan.com/euphoria/documentation) - [Search](https://test.codebyaryan.com/hs-search-results) - [404](https://test.codebyaryan.com/hs-search-resu) ```json { "@context" : "https://schema.org", "@type" : "Organization", "name" : "Euphoria Studio", "url" : "https://www.example.com" } ```