HubSpot CMS: A Responsive "Definition List" Module for Event Overviews & Specs

Purpose and Benefits

The primary purpose of this module is to cleanly organize and display "Label & Content" pairs.

Key Benefits:

• Fully Responsive: Displays as a horizontal row on desktops and stacks vertically on mobile devices automatically.
• No-Code Design Control: You can adjust colors, font sizes, and border thickness directly from the Page Editor without touching CSS.
• Semantic HTML: It uses <dl>, <dt>, and <dd> tags. This helps search engines (SEO) understand the structure of your content better than using generic <div> tags.

Use Cases

This design is highly versatile and perfect for the following scenarios:

• Event & Webinar Summaries
  • Date, Time, Venue, Capacity, Fee, Organizer.
• Company Profiles
  • Company Name, CEO, Founded Date, Headquarters, Capital.
• Product Specifications
  • Dimensions, Weight, Material, Color Options, Price.
• Job Descriptions (Recruitment)
  • Location, Salary, Working Hours, Requirements.

How to Use in HubSpot CMS

Once you implement this code in the Design Manager, here is how marketers or content editors can use it in the Page Editor:

1. Editing Content

In the module settings panel, you will see the following fields:

• Title:Enter the section header (e.g., "Event Details"). If left blank, it will not appear.
• Items (Repeater Group):This is where you add your list rows. You can add as many as you need using the "Add" button.
  • Row Title: Enter the label on the left (e.g., "Date").
  • Content: Enter the details on the right. This supports Rich Text, so you can add links or bold text.

2. Adjusting Styles

Switch to the "Styles" tab (or group) to customize the design without code:

• Title Color / Size: Adjust the main header appearance.
• Label Color: Change the text color of the left column (the item names).
• Text Color / Size: Change the color of the content and the overall font size.
• Bg Color: Change the background color of the entire list box.
• Border Color / Size: Adjust the color and thickness of the separator lines.

Module Source Code

Create a new module in the HubSpot Design Manager and paste the following code into the respective files (fields.json, module.html, module.css).

1. fields.json

This defines the module interface. It includes a repeater group for the content items and a separate group for style settings.

‍

[
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "6ef51c75-6d87-4d6f-bc68-1beedff13aac",
  "label": "title",
  "locked": false,
  "name": "title",
  "required": false,
  "type": "text"
 },
 {
  "children": [
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "440c75fa-45a0-401b-b719-4fed4bf08a97",
    "label": "row_title",
    "locked": false,
    "name": "row_title",
    "required": false,
    "type": "text"
   },
   {
    "display_width": null,
    "id": "1e3b082c-a362-5dbc-a2b2-6f5b4dde9f52",
    "label": "content",
    "locked": false,
    "name": "content",
    "required": false,
    "type": "richtext"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "0fec1fe5-d3c2-131e-595b-989d357cf578",
  "label": "items",
  "locked": false,
  "name": "items",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "764c03b3-19ad-3234-2a17-9521b1d8b7a3",
    "label": "title_color",
    "locked": false,
    "name": "title_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "360fd10e-2290-cf85-3c03-fc4797ff6b22",
    "label": "title_size",
    "locked": false,
    "name": "title_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "affa2a09-3769-cf50-8255-910426c8a58e",
    "label": "label_color",
    "locked": false,
    "name": "label_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "55c972d5-db0a-1b5d-5d09-f06365a575c8",
    "label": "text_color",
    "locked": false,
    "name": "text_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "42368473-da19-6609-db94-dbf157f38a84",
    "label": "text_size",
    "locked": false,
    "name": "text_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "35e4dc65-e6ad-4a9a-c491-bddf2339ff38",
    "label": "bg_color",
    "locked": false,
    "name": "bg_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "f4b21074-995c-6aee-f577-04dc5055b2cc",
    "label": "border_color",
    "locked": false,
    "name": "border_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "107200a3-53b1-539c-ead1-5e6efa863794",
    "label": "border_size",
    "locked": false,
    "name": "border_size",
    "required": false,
    "step": 1,
    "type": "number"
   }
  ],
  "default": {
   "title_color": {
    "color": null,
    "opacity": null
   },
   "label_color": {
    "color": null,
    "opacity": null
   },
   "text_color": {
    "color": null,
    "opacity": null
   },
   "bg_color": {
    "color": null,
    "opacity": null
   },
   "border_color": {
    "color": null,
    "opacity": null
   }
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "04d537c8-1df0-59fe-bb36-052c050d4360",
  "label": "styles",
  "locked": false,
  "name": "styles",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 }
]

‍