Skip to main content
Content modules are the building blocks for creating rich, interactive content in FreshJuice. These modules include UI components, media embeds, and layout elements.

​
Available Content Modules

FreshJuice includes 16 content modules for various purposes:

​
Interactive Components

Module: accordion.modulePurpose: Create collapsible content sections with expand/collapse functionality.Use cases:
  • FAQs
  • Expandable content sections
  • Organized information display
Available for: Landing pages, site pages, blog listings, blog posts
Module: tabs.modulePurpose: Organize content into tabbed sections for better content organization.Use cases:
  • Feature comparisons
  • Product information
  • Multi-section content
Available for: Landing pages, site pages, blog listings, blog posts
Module: flip-cards.modulePurpose: Interactive cards that flip to reveal additional content on hover or click.Use cases:
  • Team member profiles
  • Feature highlights
  • Interactive showcases
Available for: Landing pages, site pages, blog listings, blog posts

​
UI Components

Module: button.moduleCategory: Forms and ButtonsPurpose: Customizable call-to-action buttons with various styles and actions.Use cases:
  • CTAs (Call-to-Action)
  • Form submissions
  • Navigation links
Available for: Landing pages, site pages, blog listings, blog posts
Module: card.moduleCategory: Body ContentPurpose: Flexible card component for displaying content with images, text, and links.Use cases:
  • Feature highlights
  • Blog post previews
  • Product showcases
Available for: Landing pages, site pages, blog listings, blog posts
Module: divider.modulePurpose: Add visual separation and spacing between content sections.Use cases:
  • Section breaks
  • Visual spacing
  • Content organization
Available for: Landing pages, site pages, blog listings, blog posts
Module: list.modulePurpose: Formatted lists for displaying ordered or unordered content.Use cases:
  • Feature lists
  • Step-by-step guides
  • Bullet point content
Available for: Landing pages, site pages, blog listings, blog posts

​
Media Components

Module: lite-youtube.moduleCategory: Body ContentTag: VIDEOPurpose: Performance-optimized YouTube video embed. Renders approximately 224× faster than standard YouTube embeds.Features:
  • Lazy loading
  • Reduced initial page load
  • Custom thumbnail support
  • Same user experience as standard YouTube player
Use cases:
  • Video content
  • Product demos
  • Tutorials
Available for: Landing pages, site pages, blog listings, blog posts
Module: lite-vimeo.moduleCategory: Body ContentTag: VIDEOPurpose: Performance-optimized Vimeo video embed. Renders approximately 224× faster than standard Vimeo embeds.Features:
  • Lazy loading
  • Reduced initial page load
  • Custom thumbnail support
  • Same user experience as standard Vimeo player
Use cases:
  • High-quality video content
  • Professional presentations
  • Portfolio videos
Available for: Landing pages, site pages, blog listings, blog posts
Module: logo.moduleCategory: MediaPurpose: Enhanced logo display with support for multiple formats and responsive sizing.Use cases:
  • Site branding
  • Partner logos
  • Client showcases
Available for: All content types

​
Developer Tools

Module: codepen.modulePurpose: Embed CodePen demos and code examples.Use cases:
  • Code demonstrations
  • Interactive examples
  • Developer documentation
Available for: Landing pages, site pages, blog listings, blog posts
Module: github-gist.modulePurpose: Embed GitHub Gists for code snippets and examples.Technical note: Uses gist-simple for rendering.Use cases:
  • Code snippets
  • Configuration examples
  • Documentation code blocks
Available for: Landing pages, site pages, blog listings, blog posts

​
Location & Maps

Module: google-maps.modulePurpose: Embed Google Maps with customizable location markers.Use cases:
  • Contact pages
  • Store locators
  • Event locations
Available for: Landing pages, site pages, blog listings, blog posts

​
Social Components

Module: social-icons.modulePurpose: Display social media links with icon buttons.Use cases:
  • Social media links
  • Footer social links
  • Author social profiles
Available for: Landing pages, site pages, blog listings, blog posts

​
Pricing Modules

FreshJuice includes 3 pricing modules for displaying pricing information:
Module: pricing-card.modulePurpose: Single pricing card component.Use cases:
  • Individual pricing tiers
  • Feature comparisons
  • Product pricing
Available for: Pages only
Module: pricing-cards.modulePurpose: Multiple pricing cards in a grid layout.Use cases:
  • Pricing comparison tables
  • Multi-tier pricing
  • Plan features
Available for: Landing pages, site pages, blog listings, blog posts
Module: price-card-with-details.modulePurpose: Detailed pricing card with expanded feature lists.Use cases:
  • Comprehensive pricing tables
  • Feature-rich plans
  • Detailed comparisons
Available for: Landing pages, site pages, blog listings, blog posts

​
Statistics Modules

Display impressive statistics and data with 3 stats modules:
Module: stats-simple.modulePurpose: Simple statistics display with numbers and labels.Use cases:
  • Key metrics
  • Company statistics
  • Performance indicators
Available for: Landing pages, site pages, blog listings, blog posts
Module: stats-simple-grid.modulePurpose: Statistics arranged in a grid layout.Use cases:
  • Multiple metrics
  • Dashboard-style displays
  • Feature highlights
Available for: Landing pages, site pages, blog listings, blog posts
Module: stats-timeline.modulePurpose: Statistics displayed in a timeline format.Use cases:
  • Company milestones
  • Growth metrics
  • Historical data
Available for: Landing pages, site pages, blog listings, blog posts

​
Search Module

Module: search-results.moduleCategory: FunctionalityTag: SEARCHPurpose: Display search results for site search functionality. Works in conjunction with the search input module.How it works: When visitors search using a search input module, pages with this module display the results.Use cases:
  • Search results pages
  • Site-wide search
  • Content discovery
Available for: Landing pages, site pages, blog listings, blog postsLearn more: HubSpot Search Documentation

​
Usage Example

Here’s how to use content modules in your templates: 
{% dnd_area "main_content" %}
  
  {# Add an accordion module #}
  {% dnd_module "faq_accordion"
    path="../modules/accordion.module",
    label="FAQ Accordion"
  %}
  {% end_dnd_module %}
  
  {# Add a card module #}
  {% dnd_module "feature_card"
    path="../modules/card.module",
    label="Feature Card"
  %}
  {% end_dnd_module %}
  
  {# Add a Lite YouTube module #}
  {% dnd_module "demo_video"
    path="../modules/lite-youtube.module",
    label="Demo Video"
  %}
  {% end_dnd_module %}
  
{% end_dnd_area %}

​
Best Practices

Performance Tip: Use Lite YouTube and Lite Vimeo modules instead of standard embeds for significantly faster page loads.
Select modules that best fit your content needs. Use accordions for FAQs, cards for features, and tabs for organized content.
Always use Lite YouTube/Vimeo modules for video content to improve page performance.
Use the same modules across similar content types for a consistent user experience.
Verify that modules look good on all device sizes, especially mobile devices.

Navigation Modules

Navigation bars, menus, and footers

Blog Modules

Blog listing, pagination, and related posts

Testimonial Modules

Various testimonial layouts and styles

Creating Modules

Learn how to create custom modules

Build docs developers (and LLMs) love

Get started for freeTalk to us