6.1 section_settings CONTENT

Controls the section header displayed above all testimonial cards. Expanded by default in the editor.

6.2 display_mode CONTENT

Controls whether testimonials render as a slider or as a static layout, and configures the static layout's column counts.

6.3 testimonials CONTENT - REPEATER

Core content repeater. Each item represents one testimonial card. Min: 3 items · Max: 20 items · Default: 3 items. The editor uses customer_name as the item label.

6.4 visibility CONTENT

Global show/hide toggles. These affect all cards simultaneously. The only per-card toggle is testimonials[n].show_cta.

6.5 slider_settings CONTENT - CONDITIONAL

Only visible in the editor when display_mode.enable_slider = true. This group is correctly enforced via a visibility block in fields.json - the best-implemented conditional group in the module.

6.6 animation CONTENT

Reveal style options: fade-up - Elegant · fade-in - Subtle · slide-in - Dynamic

Speed mapping: slow = 0.9s · normal = 0.6s · fast = 0.4s

6.7 layout CONTENT

6.8 colors STYLE

21 individually configurable color properties using HubSpot's color picker (hex + opacity). Two fields inherit from the HubSpot site theme.

6.9 typography STYLE

Namespace Aliases

{% set ss = module.section_settings %}
{% set dm = module.display_mode %}
{% set vis = module.visibility %}
{% set sl = module.slider_settings %}
{% set anim = module.animation %}
{% set lay = module.layout %}
{% set col = module.colors %}
{% set typ = module.typography %}

Value Resolver Maps

{# Typography size map #}
{% set testimonial_size_map = {
  "small": "1rem",
  "medium": "1.125rem",
  "large": "1.3rem",
  "xlarge": "1.5rem"
} %}

{# Section padding map #}
{% set padding_map = {
  "small": "48px", "medium": "72px",
  "large": "100px", "xlarge": "140px"
} %}

{# Card shadow map #}
{% set shadow_map = {
  "none": "none",
  "soft": "0 4px 24px rgba(44,33,24,0.07)",
  "medium": "0 8px 32px rgba(44,33,24,0.13)",
  "elevated": "0 16px 48px rgba(44,33,24,0.18)"
} %}

{# Animation speed map #}
{% set speed_map = {
  "slow": "0.9s", "normal": "0.6s", "fast": "0.4s"
} %}

CSS Custom Properties Block

<style>
  #{{ module_id }} {
    --section-bg: {{ col.section_bg.color }};
    --card-bg: {{ col.card_bg.color }};
    --accent: {{ col.accent.color }};
    --heading-color: {{ col.heading_color.color }};
    --text-color: {{ col.text_color.color }};
    --star-color: {{ col.star_color.color }};
    --testimonial-size: {{ testimonial_font_size }};
    --card-radius: {{ typ.card_radius }};
    --card-shadow: {{ card_shadow_val }};
    --section-padding: {{ section_padding_val }};
    --anim-speed: {{ anim_speed_val }};
    --max-width: {{ lay.max_width }};
    /* ... all 21 color vars + layout vars */
  }
</style>

Data Attributes → JavaScript Config

Initialisation Sequence

Keyboard Navigation

Component Class Reference

Reduced Motion Support

@media (prefers-reduced-motion: reduce) {
  #ltp-[id] .ltp-card {
    transition: none;
    transform: none;
  }
  #ltp-[id] .ltp-slider-track {
    transition: none;
  }
}

Adding & Managing Testimonials

• 1Open the module in the HubSpot page editor and navigate to the Testimonials panel.
• 2Click Add to create a new testimonial (up to 20 total; minimum 3 required).
• 3Fill in the Customer Name (required) and Testimonial Content (required) for each item.
• 4Optionally add a Customer Photo (leave empty for initials placeholder), designation, location, badge, and company info.
• 5Toggle Show CTA Button per card and fill in the button text and link destination.

Choosing a Display Mode

• 1Go to the Display Mode panel.
• 2Toggle Enable Slider/Carousel: ON for slider, OFF for static layout.
• 3If OFF, choose Grid View or List View, then set column counts per breakpoint.

Configuring Slider Behaviour

• 1Open Slider Settings (only visible when slider is enabled).
• 2Set Autoplay Speed - e.g. 6000 = 6 seconds between slides.
• 3Set Transition Speed - e.g. 700 = 0.7 second slide animation.
• 4Enable Infinite Loop for seamless wrap-around from last to first.
• 5Set Cards Per View for desktop (1–3) and tablet (1–2) independently.

Customising Colors

• 1Click the Style tab in the module editor.
• 2Open the Colors panel - 21 independent color pickers are available.
• 3Accent and Heading colors inherit from the site theme by default - override only if needed.
• 4The Decor Orb color defaults to 8% opacity - keep this low for a subtle effect.

Recommended Next Steps

• 1Provide module.html for full code-level verification of all items marked Verify.
• 2Add visibility conditions to static layout fields and arrow/dot toggles.
• 3Verify opacity handling for colors.decor_color - confirm rgba() conversion.
• 4Audit CTA rel attribute logic for security completeness when both flags are true.
• 5Audit dot count generation for multi-card-per-view slider configurations.
• 6Consider adding a cards_mobile field to slider_settings.