HubSpot CMS: Implementing the "Carousel Card Module" for Smart Content Organization

When introducing multiple services or case studies on a website, a long vertical list can often lead to user drop-off. The Carousel Card Module addresses this by displaying multiple content cards in a horizontal slider, allowing you to convey a wealth of information within a limited space without overwhelming the user.

1. Objectives

The primary objective of this module is to balance information organization with intuitive usability.

• Effective Use of Space: Group numerous items (such as features or case studies) into a single section using a sleek slider format.
• Consistent Design Management: Manage global styles (border thickness, colors, font sizes) collectively while customizing the content of each card individually.
• Automatic Mobile Optimization: Automatically adjusts the number of visible cards based on screen width—typically showing multiple cards on desktop and a single card on smartphones—to ensure an optimal layout on any device.

2. Use Cases

• Service & Feature Introductions: Arrange key features in a card format, allowing users to browse through items of interest via horizontal swipes.
• Customer Testimonials & Case Studies: Feature multiple success stories to build credibility, using the slider's motion to increase the content's read-through rate.
• Latest News & Blogs: Display article thumbnails side-by-side to serve as an engaging navigation element that encourages site exploration.

3. Implementation Steps

This section covers everything from the setup in the Design Manager to the final configuration in the page editor.

Step 1: Applying the Code

Create a new module in the Design Manager and copy and paste the provided source code into the respective HTML/HubL, CSS, and JS sections, then publish the module.

Step 2: Basic Information and Style Setup

Place the module on your page and specify global settings such as the section heading, text colors, and font sizes to align with your brand identity.

Step 3: Adding Card Content

Under the "cards" group, add the desired number of items. For each card, input the "Image," "Title," and "Description" (using the rich text editor).

Step 4: Behavior Customization

Finalize the setup by toggling "Autoplay" on or off, and adjusting settings such as the sliding speed and border styles using simple switches or numeric inputs.

Module Source Code

Create a "New Module" in the HubSpot Design Manager and paste the following code into each respective section.

1. fields.json

This is the field definition. It consists of a repeater field (Items) and style setting fields (Styles).

[
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "f828e942-d88b-6872-99aa-7e6839a2ba4a",
  "label": "section_title",
  "locked": false,
  "name": "section_title",
  "required": false,
  "type": "text"
 },
 {
  "default": {
   "color": null,
   "opacity": null
  },
  "display_width": null,
  "id": "23d16879-569c-2624-b906-6ae2371a442f",
  "label": "title_color",
  "locked": false,
  "name": "title_color",
  "required": false,
  "type": "color"
 },
 {
  "display": "text",
  "display_width": null,
  "id": "bf18e844-9553-d75c-fe55-7e0c1a65fe9d",
  "label": "title_font_size",
  "locked": false,
  "name": "title_font_size",
  "required": false,
  "step": 1,
  "type": "number"
 },
 {
  "children": [
   {
    "default": {
     "size_type": "auto",
     "src": "",
     "alt": null,
     "loading": "lazy"
    },
    "display_width": null,
    "id": "0c514272-f096-02d4-33c1-791a40fe2d9f",
    "label": "Image",
    "locked": false,
    "name": "image",
    "required": false,
    "resizable": true,
    "responsive": true,
    "show_loading": false,
    "type": "image"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "1f453c47-b6a2-a51a-f8d7-dc5248114ba0",
    "label": "title",
    "locked": false,
    "name": "title",
    "required": false,
    "type": "text"
   },
   {
    "display_width": null,
    "id": "456812f3-1652-0fff-f563-f8787f2efbcc",
    "label": "description",
    "locked": false,
    "name": "description",
    "required": false,
    "type": "richtext"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "004e3419-0e40-def3-93c0-bf008f14bb26",
  "label": "cards",
  "locked": false,
  "name": "cards",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "default": {
   "color": null,
   "opacity": null
  },
  "display_width": null,
  "id": "f577bff8-1c57-1000-f2b9-0297e618fb2a",
  "label": "card_title_color",
  "locked": false,
  "name": "card_title_color",
  "required": false,
  "type": "color"
 },
 {
  "default": {
   "color": null,
   "opacity": null
  },
  "display_width": null,
  "id": "33968af4-9a30-8270-1df2-5ff36ebcca38",
  "label": "card_descriotion_color",
  "locked": false,
  "name": "card_descriotion_color",
  "required": false,
  "type": "color"
 },
 {
  "display": "text",
  "display_width": null,
  "id": "9c9f49bb-5a85-c6b6-395b-c8577fffac7b",
  "label": "card_description_font_size",
  "locked": false,
  "name": "card_description_font_size",
  "required": false,
  "step": 1,
  "type": "number"
 },
 {
  "default": {
   "color": null,
   "opacity": null
  },
  "display_width": null,
  "id": "7152aefd-c5cc-1ad9-9025-c6f55715d19d",
  "label": "border_color",
  "locked": false,
  "name": "border_color",
  "required": false,
  "type": "color"
 },
 {
  "display": "text",
  "display_width": null,
  "id": "1c170b7c-6ba3-2f81-7881-884f1b780fc9",
  "label": "border_width",
  "locked": false,
  "name": "border_width",
  "required": false,
  "step": 1,
  "type": "number"
 },
 {
  "default": false,
  "display": "checkbox",
  "display_width": null,
  "id": "624857cf-7d81-5530-10aa-72b51715b231",
  "label": "autoplay",
  "locked": false,
  "name": "autoplay",
  "required": false,
  "type": "boolean"
 }
]